DataTables Individual Column Searching using column().search().draw() Problem (server-side)

rgwenceslao

I found this solution (https://datatables.net/examples/api/multi_filter.html) to my requirement but when I tried to use it, it seems to trigger my server-side event but fails to apply a column search. Also, the keyup and change events are triggered twice - first is the column index of my column search textbox and the second, a hidden column which the DataTable uses for its default sorting. I hope someone can help me here.

$(document).ready(function(){
    $('#mlTable tfoot th').each( function () {
        var title = $('#mlTable thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    
    var myListingsDTVariable = $('#mlTable').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": setProjectName + "/dataTablesMyListings?divisionValue=1",
        "columns": [
            { "data": "checkbox", "name" : "checkbox", "sortable" : false },
            { "data": "status", "name": "status" },
            { "data": "id", "name": "id" },
            { "data": "category", "name": "category" },
            { "data": "type", "name": "type" },
            { "data": "address", "name" : "address" },
            { "data": "price", "name" : "price" },
            { "data": "bedrooms", "name" : "bedrooms" },
            { "data": "floor", "name" : "floor" },
            { "data": "lot", "name" : "lot" },
            { "data": "furnished", "name" : "furnished" },
            { "data": "contact", "name" : "contact" },
            { "data": "availabilityDate", "name" : "availabilityDate" },
            { "data": "dateModified", "name" : "dateModified" }
        ],
        "order": [[ 13, "desc" ]],
        "oLanguage": {
            "sSearch": "Filter: ",
            "sZeroRecords": "No properties found.",
            "sLengthMenu": 'Display <select>'+
            '<option value="10">10</option>'+
            '<option value="20">20</option>'+
            '<option value="30">30</option>'+
            '<option value="40">40</option>'+
            '<option value="50">50</option>'+
            '<option value="-1">All</option>'+
            '</select> properties',
            "sInfoFiltered": " (filtered from _MAX_ properties)",
            "sInfoEmpty": "No properties to show",
            "sInfo": "Showing _START_ to _END_ of _TOTAL_ properties"
              
        },
        "columnDefs": [
           {
               "targets": [ 13 ],
                "visible": false,
                "searchable": false
           }
        ]
    });
    
    // Apply the search
    myListingsDTVariable.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', myListingsDTVariable.column( colIdx ).footer() ).on( 'keyup change', function () {
            alert(colIdx); // check what index was triggered, unfortunately, column 13 is also triggered everytime
            myListingsDTVariable.column( colIdx ).search( this.value ).draw();
        } );
    } );
           
    
});

<table id="mlTable" class="order-column row-border hover">
            <thead>
                <tr>
                    <th></th>
                    <th>Status</th>
                    <th>ID</th>
                    <th>Category</th>
                    <th>Type</th>
                    <th>Address</th>
                    <th class="priceHeader">Price</th>
                    <th class="bedroomHeader">Bedrooms</th>
                    <th>Floor</th>
                    <th>Lot</th>
                    <th>Furnishing</th>
                    <th>Contact</th>
                    <th>Availability</th>
                </tr>
            </thead>
            <tbody id="mlTableBody">
               
            </tbody>
            <tfoot>
                <tr>
                    <th></th>
                    <th>Status</th>
                    <th>ID</th>
                    <th>Category</th>
                    <th>Type</th>
                    <th>Address</th>
                    <th>Price</th>
                    <th>Bedrooms</th>
                    <th>Floor</th>
                    <th>Lot</th>
                    <th>Furnishing</th>
                    <th>Contact</th>
                    <th>Availability</th>
                </tr>
            </tfoot>
        </table>

rgwenceslao

Here's my server-side code snippet for searching/filtering part:

String searchValue = "";
        if (this.getParamSearchValue() != null && !this.getParamSearchValue().equals("")) {
            searchValue = searchValue + " AND ( ";
            Integer svCounter = 0;
            for (String sV : this.getParamSearchValue().split(" ")){
                sV = sV.trim().replace("(", "\\(").replace(")", "\\)");
                searchValue = searchValue + (svCounter > 0 ? " OR " : "") + "id:" + sV;
                searchValue = searchValue + " OR statusReason:*" + sV + "*";
                searchValue = searchValue + " OR status_desc:*" + sV + "*";
                searchValue = searchValue + " OR property_id:*" + sV + "*";
                searchValue = searchValue + " OR category:*" + sV + "*";
                searchValue = searchValue + " OR type:*" + sV + "*";
                searchValue = searchValue + " OR addreNo:*" + sV + "*";
                searchValue = searchValue + " OR name:*" + sV + "*";
                searchValue = searchValue + " OR addreArea:*" + sV + "*";
                searchValue = searchValue + " OR addreCity:*" + sV + "*";
                searchValue = searchValue + " OR completeAddress:*" + sV + "*";
                searchValue = searchValue + " OR rentalPrice:*" + sV + "*";
                searchValue = searchValue + " OR salePrice:*" + sV + "*";
                searchValue = searchValue + " OR pricePerSqm:*" + sV + "*";
                searchValue = searchValue + " OR bedrooms:*" + sV + "*";
                searchValue = searchValue + " OR floorArea:*" + sV + "*";
                searchValue = searchValue + " OR lotArea:*" + sV + "*";
                searchValue = searchValue + " OR furnished:*" + sV + "*";
                searchValue = searchValue + " OR contacts_primary:*" + sV + "*";
                svCounter++;
            }
            searchValue = searchValue + " ) ";
        }

I am using SOLR that's why this is the format. I append searchValue to my SOLR query after this.

allan

I would suggest dumping the generated query out to a text file that you can inspect. Then you can check to see if the column search is being included in the query.

Allan

rgwenceslao

Hi Allan,
Thanks for your reply. I am performing System.out.println() within the class but I don't see any changes to the search parameter. Would you know the specific variable to use for column searches? I only have the variable for global searching.

allan

Please don't post the same question in multiple threads. I've just replied to your question about this is a different thread.

The manual contains a list of the parameters that the client-side sends to the server.

Allan

vkvaradha

can it possible to place the search fields on the opt of the table. or below the header and it may be placed on the first row of data. any code samples. please help me on that one.