Search/Filter question

DEVLING

I've built a datatable using server side method. It works just great. I'm struggling with the search filter.

I want the search filter to only allow numbers so I constructed the following:

 tableAllBalances = $('#tableMainBilling').DataTable({

            dom: 'Bfrtip',
            autoWidth: false,
    ..blah blah blah code

});

 ..there's what I did:

 $('#tableMainBilling_filter input').unbind();
        $('#tableMainBilling_filter input').bind('keypress', function (e) {

            if ((e.which === 32) || (e.which > 64 && e.which < 91) || (e.which > 96 && e.which < 123))
                return false;
                        
            tableAllBalances.draw();
        
        });

The filter works fine before I implemented the .unbind, .bind but I really want to make sure that only numbers are accepted as part of the search filter.

The problem is that the table does not refresh to refelect. It works and makes the trip to the database but the draw() does not seem to be working...

kthorngren

Maybe this from the jQuery unbind() docs:

As of jQuery 3.0, .unbind() has been deprecated. It was superseded by the .off() method since jQuery 1.7, so its use was already discouraged.

Sounds like maybe you want to use 'off()' and '.on()' instead.

Kevin

DEVLING

Hi .. we are using jquery 2.2.3..

kthorngren

Have you validated the the JSON response is what you expect?

I copied your code (changing the table ID) into this server side example and it seems to work:
http://live.datatables.net/manamaba/1/edit

Can you post a link or test case showing the issue?

Kevin

DEVLING

Here's a sample:

function loadBillingBalance() {

        var urlGetBalance = "@Url.Action("GetBalances", "DashBoard")";

        if (tableAllBalances != null) {

            $('#tableMainBilling').DataTable().fnDraw();
            return;

        }

     
        tableAllBalances = $('#tableMainBilling').DataTable({

            dom: 'Bfrtip',
            autoWidth: false,
            serverSide: true, // server side processing
            processing: true,
            scrollY: false,
            scrollX: true,
            scrollCollapse: false,
            bFilter: true,
            searching:true,
            sort: false,
            paginationType: "full_numbers",
            paging: true,
            bSort: false,
            responsive: true,
            sAjaxSource: urlGetBalance,
            fnServerData: function (sSource, aoData, fnCallback) {

                $.getJSON(
                        sSource,
                        aoData,
                        function (data) {

                            if (data == null) {

                                data.aoData = [];
                            }

                            fnCallback(data);

                        });

            },
            "aoColumns": [

                { "mData": "RECORD_NUMBER" },
                { "mData": "PROGRAM_TYPE"},
                { "mData": "SERVICE_AMOUNT"},
                { "mData": "BILLED_AMOUNT"},
                { "mData": "PAID_AMOUNT"},
                { "mData": "ADJUSTMENT_AMOUNT"},
                { "mData": "DENIED_AMOUNT"},
                { "mData": "WRITEDOWN_AMOUNT"},
                { "mData": "BALANCE"}
            ]

        });

                
        $('#tableMainBilling input').unbind();
        $('#tableMainBilling_filter input').bind('keypress', function (e) {

            if ((e.which === 32) || (e.which > 64 && e.which < 91) || (e.which > 96 && e.which < 123))
                return false;
            
                tableAllBalances.draw();
            

         });


    }

kthorngren

Maybe you can update my example with your code and Datatable versions. Are you using Datatable 1.9 or 1.10?

Have you looked at your browser's dev tools to see the JSON response?

Kevin

DEVLING

Hi Kevin,

Check the json returning does help. It kept bringing back the same dadta. I found out that the search parameter that is passed to the controller is null.

Any idea why?

DEVLING

FIXED! A few things - Kevin's suggestion also helped along with:

 $('#tableMainBilling input').unbind();
        $('#tableMainBilling_filter input').bind('keypress', function (e) {

            if ((e.which === 32) || (e.which > 64 && e.which < 91) || (e.which > 96 && e.which < 123))
                return false;
                tableAllBalances.search(this.val()).draw();
            

         });

Key: search(this.val()).draw() helps populate the passed sSearch parameter.

I also had a wrong parameter in an Oracle stored procedure.

Thanks Kevin!