JQuery dataTable plugin quick notes

Server-side processing

To return the names of the columns you want, you need to use aoColumndefs and provided individual objects with the property sName.

Below is most of the implementation for a jeditable Ajax driven dataTables, this is the Alpha version and still needs a lot of love in places, but the gist of it is here

var semesterTable = $("#semesterViewTable").dataTable({
                "bProcessing"   : true
            ,   "bServerSide"   : true
            ,   "sAjaxSource"   : ""
            ,   "fnRowCallback" : function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                                    //console.log(nRow, aData, iDisplayIndex, iDisplayIndexFull);
                                    var recordId = aData[0];
                                    $("td", nRow).data("recordId", recordId);
                                    return nRow;
                                }
            , "fnDrawCallback"  : function(){
                                    $("td.editableMajor")
                                        .editable("",
                                                    {                                                        
                                                          loadurl: ""
                                                        , type: "select"
                                                        , submit: "OK"
                                                        , method: "post"
                                                        , submitdata: function(){
                                                            console.log(this, arguments);
                                                            var $this = $(this);
                                                            return {
                                                                    recordId: $this.data("recordId")
                                                                    , classes: $this.attr("class")
                                                                }
                                                        }
                                                    });
                                   
                                }
            /* Seriously a meta-generator for this would be nice */
            ,"aoColumnDefs": [
                ,{ sName:"record_id",          aTargets:[00], bSearchable:false, bVisible:false }
                ,{ sName:"roster_date",         aTargets:[01], sClass:"roster_date"}
                ,{ sName:"roster_name_both",    aTargets:[02], sClass:"roster_name_both"}
                ,{ sName:"roster_student_id",   aTargets:[03], sClass:"roster_student_id"}
                ,{ sName:"roster_major1",       aTargets:[04], sClass:"roster_major1 editableMajor"}
                ,{ sName:"roster_major2",       aTargets:[05], sClass:"roster_major2 editableMajor"}
                ,{ sName:"roster_major3",       aTargets:[06], sClass:"roster_major3 editableMajor"}
                ,{ sName:"roster_major4",       aTargets:[07], sClass:"roster_major4 editableMajor"}
                ,{ sName:"roster_minor1",       aTargets:[08], sClass:"roster_minor1 editableMajor"}
                ,{ sName:"roster_minor2",       aTargets:[09], sClass:"roster_minor2 editableMajor"}
            ]
    });

For the tbody, just put something like

        <tbody><tr><td>Chill the fuck out, it's loading</td></tr></tbody>

Server side data contract

dataTables expects a JSON’ified construct like this

$responseBody = array(
		"sEcho" => intval($input['sEcho']),
		"iTotalRecords" => (int) $count,
		"iTotalDisplayRecords" => count($data),
		"aaData" => $data
            );

  • sEcho is a security variable used by dataTables, basically just send it back and don’t worry about it
  • iTotalRecords – is the MAXIMUM # of records in the data set without any filtering
  • iTotalDisplayRecords – is the MAXIMUM # of records in the data set WITH filtering
  • An array of numerically indexed arrays, dataTables doesn’t like associative arrays

Total and Display total records

If the blink tag still worked reliably, I’d put a neon sign here. Basically you need to do 3 queries per Ajax call… call 1 is to get a

 
   SELECT count(1) FROM sourceTABLE

call 2 is

 SELECT count(1) FROM sourceTable WHERE someCriteria 

and finally call 3 is

 SELECT yourColumnList FROM sourceTable WHERE someCriteria

With memcache or such, I’d advise caching the total count but no matter what you unfortunately need to make these three SQL calls :(.