DataTables.js → How to modify your returned AJAX JSON data before sending it to your HTML table
Tony Mucci

Hi Tony, I need your help in respect of DataTables. I just started to see the power and capability of DataTables that is why i want to use them in my development project.

My app collects field data with lat/long and store in MySQL. I then use html, css, javascript, Jquery, Ajax, PHP to present in both Tabular and Map formats.

With developer tools, I can see PHP connecting and retrieving the data, but it does not show in my table. The only thing I see is the table deader.

What am I missing? I’ve searched evefry where including DataTablees website and StackOverflow but still cant get it working

Please help!

— — — — — — — — — — — — — — — — — — —


<meta charset=”utf-8">
 <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
 <meta name=”viewport” content=”width=device-width, initial-scale=1">

 <! — jquery →
 <script src=”"></script>

<! — bootstrap →
 <script src=”"></script>
 <link rel=”stylesheet” href=”">

<! — google api →
 <script src=”"></script>
 <! — datatables →
 <link rel=”stylesheet” href=”"></style> 
 <script type=”text/javascript” src=”"></script>

<! — maplace →
 <! — <script src=”maplace.min.js”></script> →





<div id=”main_menu”>
 <nav class=”navbar navbar-default” style=”min-height: 0;”>
 <! — Main Menu →
 <ul class=”nav nav-pills”>
 <li class=”active”><a data-toggle=”tab” href=”#municipalities”>Municipalities</a></li>
 <li><a data-toggle=”tab” href=”#contracotrs”>Contractors</a></li>
 <li><a data-toggle=”tab” href=”#fws”>Field Workers</a></li>
 <li><a data-toggle=”tab” href=”#devices”>Devices</a></li>
 <li><a data-toggle=”tab” href=”#erfs” >ERFs</a></li>
 <li><a data-toggle=”tab” href=”#wos”>Works Orders</a></li>
 <li><a data-toggle=”tab” href=”#dashboard”>Dashboard</a></li>
 <li><a data-toggle=”tab” href=”#assets”>Assets</a></li>
 </nav><! — Main Menu → 

<div class=”tab-content”>
 <div id=”municipalities” class=”tab-pane fade in active”>
 <p>Municipalities Windows</p>
 <div id=”contracotrs” class=”tab-pane fade”>
 <p>Contractors Windows</p>
 <div id=”fws” class=”tab-pane fade”>
 <p>Field Workers Windows</p>
 <div id=”devices” class=”tab-pane fade”>
 <p>Devices Windows</p>
 <div id=”wos” class=”tab-pane fade “>
 <p>WOs goes here.</p>
 <div id=”dashboard” class=”tab-pane fade”>
 <p>Dashboard data displays here.</p>
 <div id=”assets” class=”tab-pane fade”>
 <p>Assets data displays here.</p>
 <div id=”erfs” class=”tab-pane fade” >
 <ul class=”nav nav-tabs” data-tabs=”tabs” id=”erfTab”>
 <li class=”active”><a href=”#tab_erf_table” data-toggle=”tab”>ERF Table</a></li>
 <li><a href=”#tab_erf_map” data-toggle=”tab”>ERF Map</a></li>
 <li><a href=”#tab_erf_charts” data-toggle=”tab”>ERF Chats and Graphs</a></li>
 <div class=”tab-content”>
 <div class=”tab-pane active” id=”tab_erf_table”>
 <table id=”erfTable” class=”display” width=”100%”>
 <div class=”tab-pane” id=”tab_erf_map”> 
 <div id=”mapcanvas”></div> 
 <div class=”tab-pane” id=”tab_erf_charts”>
 <p> ERF Charts and Graphs go here </p>
 <div id=”erfCharts”></div>

 $(document).ready(function() {
 $(‘#erfTable’).DataTable( {
 ajax: “jq_erf_dbquery.php”,
 type: “POST”,
 dataSrc: “”,
 columns: [
 { title: “city” },
 { title: “town” },
 { title: “erf_no.” },
 { title: “an” },
 { title: “de” },
 { title: “eem” },
 { title: “comment” }
 } );
 } );

— — — — — — — — — — — — — — — — — — —

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.