Get JSON Data into DataTable EXAMPLE

donblaylock

I have searched many times over trying to get a working solution to get a DatabTable populated with JSON data created by a PHP file. Can anyone please submit a working example for Datatables 1.10.0? OR... can someone tell me what id wrong with my code. I am including 2 rows of data from the JSON output of my PHP code and my jQuery/DataTables code:

2 rows of my JSON Data:

{"chemSearch":[{"id":"1","fabric_name":"one","cas":"two","chemical":"three","chem_conc":"four","chem_phase":"five","astm_test_results":"six","astm_test_results_f903":"seven","fabric_url":"ten","ce_test_results":"eight","ce_class":"nine"},{"id":"107","fabric_name":"q1","cas":"q2","chemical":"q3","chem_conc":"q4","chem_phase":"q5","astm_test_results":"q6","astm_test_results_f903":"q7","fabric_url":"q8","ce_test_results":"q9","ce_class":"q10"},

My Code

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> 
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script> 
<script type="text/javascript" language="javascript" class="init">

        $(document).ready(function() {
            
            var id;
            var fabric_name;
            var cas;
            var chemical;
            var chem_conc; 
            var chem_phase; 
            var astm_test_results; 
            var astm_test_results_f903; 
            var fabric_url; 
            var ce_test_results; 
            var ce_class;
            
            var aRowToDelete;

            var bAddMode = false;
                                
            var t = $('#chemSearchTable').dataTable( {
                
                "ajax": { 
                "url": "getChemData.php",
                "dataType": "json",
                "cache": false,
                "contentType": "application/json; charset=utf-8"

                },
                
                "aoColumns": [ 
                    {'mData': 'id', 'sType': 'string', "bVisible": true, "bSearchable": false}, 
                    {'mData': 'fabric_name', 'sType': 'string', 'bVisible': true},
                    {'mData': 'cas', 'sType': 'string', 'bVisible': true},
                    {'mData': 'chemical', 'sType': 'string', 'bVisible': true},
                    {'mData': 'chem_conc', 'sType': 'string', 'bVisible': true},
                    {'mData': 'chem_phase', 'sType': 'string', 'bVisible': true},
                    {'mData': 'astm_test_results', 'sType': 'string', 'bVisible': true},
                    {'mData': 'astm_test_results_f903', 'sType': 'string', 'bVisible': true},
                    {'mData': 'fabric_url', 'sType': 'string', 'bVisible': true},
                    {'mData': 'ce_test_results', 'sType': 'string', 'bVisible': true},
                    {'mData': 'ce_class', 'sType': 'string', 'bVisible': true}
                    ] 
                });
...

allan

You need to tell DataTables that your data is in the chemSearch property. Use ajax.dataSrc to do that.

Example: http://datatables.net/examples/ajax/custom_data_property.html

Allan

donblaylock

Thanks Allan, got it working. I made so many changes to my code trying to get this fixed. I knew it was something simple.