How to add dynamic column headers to jquery datatable

Question

I am trying to add the dynamic column header to data table ,Here is my code for datatable initialisation:

var $table=$('#MSRRes').dataTable
( {
        "bFilter": false,                         
        "bDestroy": true,
        "bJQueryUI": true,
        "ajax" :{
                    url: 'getResult.php',
                    type: "POST",
                    data: {
                        formData:postData,
                        formName:'afscpMsr',
                        action:'advanceSrch'
                    }

                }
});

Following code is for static intialisation of table column header : Customer Name Feature Order No NCP Account Number Mcn Code Sales Person Due Date
(DD/MM/YYYY) No. of SUPs Zonee Id Details

The following code is ajax call to get the datatable result display along with the column names to be display: $result is in json format,$colcond='cust_name,cust_no,mcn_no,sales_contact_name,order_no,COUNT(sup_id),due_date,z.zoned_from_id';

 $newarray = array(
                "draw"            => 1,
                "recordsTotal"    => sizeof($result),
                "recordsFiltered" => sizeof($result),
                "data"            => $result,
                "column"          => $colCond   
            );

            echo json_encode($newarray);

I don't think this has anything to do with jquery-ui, hence removing the tag. Correct me if I'm wrong. — T J
– T J, Commented Nov 26, 2014 at 16:30
Yes, jquery ui is not there, Its related to jquery datatables — user3829086
– user3829086, Commented Nov 27, 2014 at 10:23

user3829086 · Accepted Answer · 2014-11-27 10:49:01Z

1

var aryColTableChecked = ["column00", "column01", "column02",    "column03","column00","column00","column00","column00"];
var aryJSONColTable = [];

for (var i=0; i < aryColTableChecked.length; i++ ) {
      aryJSONColTable.push({
                "sTitle": aryColTableChecked[i],
                "aTargets": [i]
       });
};

Include this in data table definition :

 var $table=$('#MSRRes').dataTable
( {
    "bFilter": false,                         
    "bDestroy": true,
    "bJQueryUI": true,
    "ajax" :{
                url: 'getResult.php',
                type: "POST",
                data: {
                    formData:postData,
                    formName:'afscpMsr',
                    action:'advanceSrch'
                }

            },
  "aoColumns": aryJSONColTable
});

});

answered Nov 27, 2014 at 10:49

user3829086

3635 gold badges12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3829086 Over a year ago

this solution is working for me, for more information check this link : datatables.net/forums/discussion/11637/…

Collectives™ on Stack Overflow

How to add dynamic column headers to jquery datatable

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related