Data Table individual search box is not showing.

sam101

Hi
I got a dataTable and i like to put individual search box for all the columns which will only search data of that column. The search boxs need to put on table header but just underneath the column label (exp; Id, FirstName etc..). i already go through ""http://datatables.net/release-datatables/examples/api/multi_filter.html"" link for my reference.

my css is:

 ...  tfoot {
    display: table-header-group;
}
    tfoot input {
        width: 100%;
        padding: 3px;
        box-sizing: border-box;
    }...

my HTML is: ...

table id="agents" style="margin-bottom: 10px"
            <thead>
                <tr>
                    th>Id</th
                   th>Join Date</th
                    th>First Name </th
                    th>Last Name</th
                    th>Website</th
                /tr
            </thead>
            <tbody>
           </tbody>
        </table>

my Jquery code is: ...

$(document).ready(function () {

           
            $('#agents tfoot th').each(function () {
                var title = $(this).text();
                $(this).html('<input type="text" placeholder="Search ' + title + '" />');
            });



            $('#agents').dataTable({
                "bServerSide": true,
                "sAjaxSource": "@Url.Action("NewPromotersQuery", "Admin")",
                "bProcessing": true,
                "type": "POST",
                "pagingType": "full_numbers",
                "sServerMethod" : "POST",
                //"info": "true",
                "sScrollX": "100%",
                "bAutoWidth": false, // Disable the auto width calculation 
                "aoColumns": [
                       { "sName": "Id" },
                       { "sName": "Join Date" },
                       { "sName": "First Name" },
                       { "sName": "Last Name" },
                       { "sName": "Website" },   
                ]
            });
 tableInstance.columns().every(function () {
                var dataTableColumn = this;

                $(this.tfoot()).find('input').on('keyup change', function () {
                    dataTableColumn.search(this.vlaue).draw();
                })
            });

            

        });

Now the problem is, no search TextBox is showing and no filtering even the search box is on bottom. i investigate and found, the title variable from " var title = $(this).text();" suppose to have value of "th" but my one is "window". including this, search is also not happening if we follow the above datatabel.net link. the sample code is https://jsfiddle.net/khSam/c0osdtrc/

Please help me to correct my code. FLY i got 6000 data but i am bringing only 10 data on each call. The main concern is, the individual column is not filtering after giving input if we keep the search field even in bottom.

Thank you

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

Thanks for your question - however, per the forum rules can you link to a test case showing the issue please. This will allow the issue to be debugged.

Information on how to create a test page], if you can't provide a link to your own page can be found here.

Thanks,
Allan

sam101

Dear Allan

the sample code is https://jsfiddle.net/khSam/c0osdtrc/, my primary concern is , when we will write in the individual search column then it will hit the server side action and will provide meRequest["iSortCol_0"] and sSearch from the follwoing parameter ... int DisplayStart = incomingParameter.iDisplayStart;
int sortColNo = Convert.ToInt16(Request["iSortCol_0"]);
string sortDirection = Request["sSortDir_0"];
string searchItem = incomingParameter.sSearch;...

Thanks for your concern.

allan

The example doesn't appear to run at all. It doesn't look like jQuery or DataTables are even being included. Perhaps I should have said a "running test case" which shows the issue.

Allan

sam101

Dear Allan

As i am new to code so i couldn't able to make the jsfiddle working for you to debug. unfortunatly i stuck and made a video to show you the code. The video is hosted online in the screencast server. i can assure you that it has no virus and it is completely safe to watch. it is only 4 min video where i showed you my code. it would be very helpful if you please give me a clear solution of my problem. http://www.screencast.com/users/Samdani_1/folders/Office%20use%20Only/media/d7105b6c-dae8-4f7d-8ecc-13476fa822d7 .