Filter columns with server-side processing

RémyMarfil

Hello,

I try to set up columns filtering with server-side processing.
I know this is a question that have been already answered a few times, but all the solutions doesn't work for me.

This is my DataTable :

 /*
     * Creation of the datatable
     */
     mosRuleTable = $('#rulesTable').DataTable( {
            "sAjaxSource": "/mos/marketordersender/rules",
            "bServerSide" : true,
            "bProcessing" : true,
            "bDestroy" : true,
            "paging":   true,
            "ordering": false,
            "info":     false,
            "aoColumnDefs": getMOSRuleDef(editMode),
            "oLanguage" : {
                "oPaginate" : {
                    "sFirst" : "First",
                    "sLast" : "Last",
                    "sNext" : "Next",
                    "sPrevious" : "Previous"
                }
            },
            "sPaginationType" : "full_numbers",
            "bFilter" : true,
            "bSort" : false,

When i try to use table.columns().every( function () { to set up the filtering It say that columns is not a function.

Can someone help me ?

kthorngren

table.columns().every( function () {

table is a variable that contains the Datatables API. In your case you are using mosRuleTable. So you should use mosRuleTable.columns().every( function () {.

Kevin

RémyMarfil

Yes sorry, I just copy-paste the function in my post but I use mosRuleTable.columns().every( function () in my code

RémyMarfil

This is my code when i try to apply filtering :

$(document).ready(function() {
            $('#rulesTable tfoot th').each( function () {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
            } );
         
            // DataTable
            var mosRuleTable = $('#rulesTable').DataTable();
         
            // Apply the search
            mosRuleTable.columns().every( function () {
                var that = this;
         
                $( 'input', this.footer() ).on( 'keyup change clear', function () {
                    if ( that.search() !== this.value ) {
                        that
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
});

kthorngren

Your code works here:
http://live.datatables.net/nefinihu/1/edit

Are you still having problems? If so then please update the test case to show the problem so we can help.

Kevin

RémyMarfil

Yes, still not working

Maybe it comes from the function getMOSRuleDef(editMode) where i get the aoColumnDefs :

function getMOSRuleDef(editMode){
     
     // available accessors for the ordersList 
    var availableAccessors =/*[[${availableAccessors}]]*/ '';
     
     // result array, contains the definition of every column (data to watch + rendering template)
     var aoColumDefs = [availableAccessors.length];
     if( editMode === true || editMode=='true'){
        // Add two tableData
         availableAccessors[availableAccessors.length]="url";       
         availableAccessors[availableAccessors.length]="delete";
     }
     
     for (i = 0; i < availableAccessors.length; i++) {
         var width=null;
         var search = false;
         if(availableAccessors[i]==="propertiesTests") {
             width='45%';
             search = true;
         }
         var columnDef = {
                    "aTargets": [ i ],
                    "mData": availableAccessors[i],
                    "searchable": search,
                    "width": width,
                    "mRender": function ( data, type, row, table ){
                        
                        var render = '<td>';
                        var currentAccessor = availableAccessors[table.col];
                        if(currentAccessor === "status"){
                            if(row.status===true){
                                if(editMode === true){
                                    render = render + "<input type=\"checkbox\" id=\"status_checkbox_"+ row.ruleID + "\" checked=\"checked\" onclick=\"changeRuleStatus(this)\"/>";
                                }else{
                                    render = render + "<input type=\"checkbox\" id=\"status_checkbox_"+ row.ruleID + "\" checked=\"checked\" disabled=\"disabled\"/>";
                                }
                            }else if (row.status===false){
                                
                                if(editMode === true){
                                    render = render + "<input type=\"checkbox\" id=\"status_checkbox_"+ row.ruleID + "\" onclick=\"changeRuleStatus(this)\"/>";
                                }else{
                                    render = render + "<input type=\"checkbox\" id=\"status_checkbox_"+ row.ruleID + "\" disabled=\"disabled\"/>";
                                }
                            }
                        }else if(currentAccessor === "url"){
                            render = render + "<form class=\"detailFormRules\" id=\"myModal-form\">"
                              + "<input type=\"hidden\" name=\"url\" value=\"/mos/marketordersender/details\"/>"
                              + "<input type=\"hidden\" name=\"urlParams\" value=\"" + row.ruleID + "\"/>"
                              + "<button id=\"myModal-btn\" type=\"button\" class=\"btn btn-primary btn-xs center-block\"><span class=\"glyphicon glyphicon-pencil\"></span></button></form>";
                             
                        }else if(currentAccessor === "routers"){
                            // routers = array = [router1 loadBalancing1, router2 loadBalancing2, etc]
                            if(data && data != "undefined"){
                                for (var i = 0; i < data.length; i++) {
                                    render = render + '<span>' + data[i] + '</span>' + "<br/>";
                                }
                            }
                        }else if(currentAccessor === "lastChange"){
                            if(row.lastChangeDateTimeFormatted && row.lastChangeDateTimeFormatted != "undefined"){
                                render = render + '<span>' + row.lastChangeDateTimeFormatted + '</span>' + "<br/>";
                            }
                            if(row.lastChangeUser && row.lastChangeUser != "undefined"){
                                render = render + '<span>' + row.lastChangeUser + '</span>';
                            }
                        }else if(currentAccessor === "delete"){
                            var deleteUrl = row.url.replace("details","delete");
                            render = render + "<button href=\"" + "#" + "\" "+ " id=\"" + row.ruleID +"\" class=\"btn btn-xs btn-danger center-block\"><span aria-hidden=\"true\" style=\"margin-top:0.3em\" class=\"glyphicon glyphicon-remove\" onclick=\"deleteRule(this,event)\"></span></button>";
                        }else if(currentAccessor === "propertiesTests"){
                            var exp = parseSpelExp(data);
                            var tmp = "<p>";
                            for(i = 0; i < exp.tests.length; i++){
                                if(i > 0) {
                                    var color = null;
                                    if(exp.sep === "AND") color = "text-success";
                                    else if(exp.sep === "OR") color = "text-warning";
                                    tmp+= " <span class=\"" + color + "\" style=\"font-weight: bold;\">" + exp.sep + "</span> ";
                                }
                                tmp+= traduction(exp.tests[i].property) + " <span style=\"font-weight: bold;\">" + exp.tests[i].operator + "</span> ";
                                for(j = 0; j < exp.tests[i].values.length; j++){
                                    if(j > 0) tmp+=", ";
                                    if(exp.tests[i].values[j] === ''){
                                        tmp+=traduction("empty");
                                    }else{
                                        tmp+=traduction(exp.tests[i].values[j]);
                                    }
                                }
                                tmp+="<br>";
                            }               
                            tmp+="</p>";            
                            render = render + '<div style="overflow-wrap: break-word;">' + tmp + '</div>';
                        }
                        else{
                            render = render + '<span>' + data + '</span>';                              
                        }
                        render = render + '</td>';
                        return render;
                    }
         };
         aoColumDefs[i] = columnDef;
     }
     
     return aoColumDefs;
}

kthorngren

still not working

Are you still getting set up the filtering It say that columns is not a function.?

Kevin

RémyMarfil

Yes, i don't understand why

kthorngren

In order for use to provide suggestions we will need to see the problem. Please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin