phpdatatablesserver-side-scripting

JQuery DataTable Column Filter using Checkboxes


How to implement JQuery DataTable Column Filter using Checkboxes server side scripting? Please tell me whether the filtering is done from serveside.php or in my HTML file using javascript. I want to implement like https://jquery-datatables-column-filter.googlecode.com/svn-history/r77/trunk/checkbox.html but using server side scripting.


Solution

  • Code for datatables initialization in HTML file. One thing must be kept in mind the initialization is done not on local server. The code must be run on remote server.

    $(document).ready(function() {
    var $dt = $('#example1').dataTable({
    "bProcessing": true,
            "bServerSide": true,
            "bAutoWidth": false,
            "pagingType": "full_numbers",
            "sAjaxSource": "server.php",
            "aaSorting": [[3, "desc"]],
            "fnServerData": function(sUrl, aoData, fnCallback) {
            $.ajax({
            "url": sUrl,
                    "data": aoData,
                    "success": fnCallback,
                    "dataType": "json",
                    "cache": false
            });
            }
    });
            //$dt.fnDraw();
    
            $dt.columnFilter({sPlaceHolder: "head:before",
                    aoColumns: [
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                    {
                    type: "checkbox",
                            values:
                            [
                            {value: '3', label: 'New'},
                            {value: '0', label: 'Pending'},
                            {value: '1', label: 'Active'},
                            {value: '2', label: 'Inactive'},
                            ]
                    },
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                            null,
                    ]
            });