Filter columns with server-side processing

Filter columns with server-side processing

RémyMarfilRémyMarfil Posts: 5Questions: 0Answers: 0

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 ?

Replies

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    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émyMarfilRémyMarfil Posts: 5Questions: 0Answers: 0

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

  • RémyMarfilRémyMarfil Posts: 5Questions: 0Answers: 0

    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();
                        }
                    } );
                } );
    });
    
  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816
    edited February 19

    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émyMarfilRémyMarfil Posts: 5Questions: 0Answers: 0

    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;
    }
    
  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    still not working

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

    Kevin

  • RémyMarfilRémyMarfil Posts: 5Questions: 0Answers: 0

    Yes, i don't understand why :(

  • kthorngrenkthorngren Posts: 8,082Questions: 25Answers: 1,816

    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

Sign In or Register to comment.