Hi, This article is the second part of my article grid in mvc using datatables . As this article is a bit more coupled with the first one therefore I recommend you to go through the first one before the second article. Its up to you.

While DataTables has a lot of flexibility built-in by default, there might come a time when you wish to add your own features or override some existing one provided by DataTables. This is possible through the plug-in architecture that DataTables provides for developers.

As we know, DataTables only provide a simple text box for query the data. We now going to convert this search box to do something interesting for us. So I write an extension to provide users with option of searching data for different columns at the same time. What our multiple search extension does is when some one click on search text box of DataTables, it open a search dialog box with configured check boxes and corresponding text boxes. One can just need to tick out the fields and type the query value. Now when user press return key the extension search the data table by calling dataTables API function "fnFilter".

The extension does one more interesting thing it set search parameters so that server can get the query data from the request object. Now again we come back to our debtors table and set our multiple search extension.

oTable = $('#tableid').dataTable({
                "bProcessing": true,
                "bServerSide": true,
                "sServerMethod": "POST",
                "sAjaxSource": "/data/debtors",
                "aoColumnDefs": [
                    { "mDataProp": "Debtor", "aTargets": [0] },
                    { "mDataProp": "Iban", "aTargets": [1] },
                    { "mDataProp": "Bic", "aTargets": [2] }
                ],
                "aaSorting": [[1, 'desc']]
               });
oTable.fnAddSearchBox($("#exampleSearch"),
                        {
                          option:{"1":{ tip:'please enter IBAN'},
                                  "2":{ tip:'please enter BIC'}}
                        });

<div id="exampleSearch"  title="Search">
    <div>
        <input id="Name" type="checkbox" value="1" />
        <label class="sfieldslbl">Iban</label>
    </div>
    <div>
        <input id="Address" type="checkbox" value="2" />
        <label class="sfieldslbl">Bic</label>
    </div>
</div>