jQuery DataTable aaColomn无法正常工作

Question

I use DataTable to display some of my data on my page, using ajax server side.

The js code is like below:

 $('#apply').DataTable({ "bProcessing": true, "aoColumn": [ null, {"mData": "booking_no"}, null, {"mData": "dep_date"}, null, null, null, null, null, null ], "aoColumnDefs": [ { "aTargets": [0], "sClass": "details-control", "bSortable": false, "sDefaultContent": "" }, { "aTargets": [3, 4, 5, 6, 8, 9], "bVisible": false } ], "aaSorting": [[3, 'asc']], "bServerSide": true, "sAjaxSource": "<?php echo plugins_url('mybookings.php', __FILE__); ?>" }); 

The ajaxsource mybooking.php returns values like this:

 { "sEcho": 0, "iTotalRecords": 4, "iTotalDisplayRecords": 4, "aaData": [{ "aid": "1", "booking_no": "24****90", "source": "Booking", "dep_date": "2016\\/**\\/12", "ali_acc": "ty****om", "ali_name": "*\友", "contact": "", "status": "\已\确\认", "statement": "final", "remark": "\大\客\户" }, { "aid": "2", "booking_no": "93****70", "source": "Agoda", "dep_date": "2016\\/**\\/03", "ali_acc": "ty****om", "ali_name": "*\友", "contact": "", "status": "\已\提\交", "statement": "", "remark": "test" }, { "aid": "3", "booking_no": "93****86", "source": "Agoda", "dep_date": "2016\\/**\\/04", "ali_acc": "ty****om", "ali_name": "*\友", "contact": "", "status": "\已\提\交", "statement": "", "remark": "" }, { "aid": "4", "booking_no": "93****35", "source": "Agoda", "dep_date": "2016\\/**\\/30", "ali_acc": "ty****om", "ali_name": "*\友", "contact": "", "status": "\已\提\交", "statement": "", "remark": "" }] } 

The page return a warning: " DataTables warning (table id = 'apply'): Requested unknown parameter '1' from the data source for row 0 ".

I tried and find out that the warning would be gone only if I change the format of aaData from json object into arrays. That is to say, mybookings.php must return data like this:

 { "sEcho": 0, "iTotalRecords": 4, "iTotalDisplayRecords": 4, "aaData": [ ["1", "24****90", "Booking", "2016\\/**\\/12", "ty****om", "*\友", "", "\已\确\认", "final", "\大\客\户"], ["2", "93****70", "Agoda", "2016\\/**\\/03", "ty****om", "*\友", "", "\已\提\交", "", "test"], ["3", "93****86", "Agoda", "2016\\/**\\/04", "ty****om", "*\友", "", "\已\提\交", "", ""], ["4", "93****35", "Agoda", "2016\\/**\\/30", "ty****om", "*\友", "", "\已\提\交", "", ""] ] } 

I need to use json objects for some of my purpose, But it seems like the aaColumn.mData parameter does not work. Does anyone know the solution?

Answer 1

You are using DataTable not dataTable . Those are different.

Javascript:

$('#apply').DataTable({
    "processing": true,

    "columnDefs": [
        {
            "targets": [0],
            "className": "details-control",
            "orderable": false,
            "defaultContent": ""
        },
        {
            "targets": [3, 4, 5, 6, 8, 9],
            "visible": false
        }
    ],
    "order": [[3, 'asc']],
    "serverSide": true,
    "ajax": "<?php echo plugins_url('mybookings.php', __FILE__); ?>"
});

PHP:

<?
$result = array();
$result_json = array();
foreach($db as $db_record)
{
  $result[] = $db_record->dataTable_col1;
  $result[] = $db_record->dataTable_col2;
  $result_json["data"][] = $result;
  $result = array();
}
echo json_encode($result_json);
?>

EDIT

Here are the links for reference for difference between dataTable() & DataTable()

https://www.datatables.net/forums/discussion/22577/datatable-or-datatable https://datatables.net/manual/api#Accessing-the-API

Answer 2

Finally I use dataTable 1.10.11 instead of 1.9.0, and jquery 1.12.0 instead of 1.7.1 to solve this problem. Both dataTable() and DataTable() are working.

In fact, this is not a perfect solution. Because newer version does not works good on jQuery makeEditable plugin (an old plugin I ever used, problems with add and remove functions). I am just a new programmer, I only have to load different version of plugins on different pages when needed.