When I disable search box, all Text boxes on form are being turned into search box?

techynt

I am using DataTables 1.10 and jQuery 2.1 and AngularJS for the form fields on the search page.
So we have a bunch of text boxes and DDL for providing input for search, which we display using data tables. We wanted to enable server side paging and sorting, hence we are configuring this: "bServerSide": true .
Here is the code snippet:

$('#tSearchList').dataTable({
        "bServerSide": true,
        "bFilter": false,
        "bAutoWidth": false,
        "sAjaxSource": "MVCController/MVCActionMethod",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "date_from", "value": $("#dateFromId").val() });
            aoData.push({ "name": "date_to", "value": $("#dateToId").val() });
            aoData.push({ "name": "t_id", "value": $("#txtTId").val() });
            aoData.push({ "name": "s_id", "value": $("#txtSId").val() });
        },
        "bProcessing": true,
        "sDom": '<"H"lTr><"datatable-scroll"t><"F"ip>',

My issue is, whenever I change the text in text box TxtTid or txtSid, server side search is being submitted automatically.

How can I disable all search to server side except when paging or sorting? How is DataTable watching the change event of above text boxes?

Thanks

techynt

---

techynt

Below is code, where I even tried to make searchable false for all columns. But still somehow the text boxes on this form are being watched, and when they change, DataTable is triggering a server side search?

"aoColumnDefs": [
            { "sName": "SId", "searchable": false },
            {
                "sName": "TId",
                "searchable": false,
                "targets": 3,
                "sWidth": "6%",
                "render": function (data, type, full, meta) { return '<a href="' + data + '">' + data + '</a>'; } 
            },
            { "sName": "Status", "searchable": false },
            { "sName": "AcctNumber", "searchable": false },
            { "sName": "SDateTime", "searchable": false },
            { "sName": "SDateTime", "searchable": false }
]

techynt

Solution:

Dont disable search box. Just hide it using this css: .dataTables_filter { visibility: hidden;}.

Now the search box is not visible and other text boxes are not being turned into search box.