Individual Column input box Search not working in Footer

murugan11

I am using Individual column input box searching..But its showing No matching records found. Below my code:
function bindTransportDetails() {

$.ajax({
    type: "POST",
    url: location.pathname + "/BindTransportlist",
    contentType: "application/json; charset=utf-8",
    datatype: "jsondata",
    async: "true",
    success: function (response) {

        var msg = eval(response.d);
        for (var i = 0; i <= (msg.length - 1) ; i++) {
            var row = row + '<tr><td class="hiden">' + msg[i].Id + '</td><td>' + msg[i].Transport_Name + '</td><td>' + msg[i].Tin_No + '</td><td>' + msg[i].Contact_Person + '</td><td>' + msg[i].Email_Id + '</td><td>' + msg[i].Contact_No + '</td><td>' + msg[i].Bank_Name + '</td><td>' + msg[i].Account_No + '</td><td>' + msg[i].RTGS_No + '</td><td>' + msg[i].Branch + '</td><td>' + msg[i].Pan_No + '</td><td>' + msg[i].AddressLine + '</td><td>' + msg[i].CountryName + '</td><td>' + msg[i].StateName + '</td><td>' + msg[i].City_Id + '</td><td>' + msg[i].StatusName + '</td><td class="width-20">'
                          + '<div class="btn-group text-center"><i class="fa fa-pencil fa-lg mar-left-20 inputtooltip" aria-hidden="true"  onclick="EditRedirectID(' + msg[i].Id + ')" data-toggle="tooltip" title="Edit"></i>'
                          + '<i class="fa fa-trash-o fa-lg mar-left-20 icon-delete" aria-hidden="true" data-toggle="tooltip" title="Delete"></i> </div>'
                          + '</td>'
                          + '</tr>';
        } 

        $('#tblTansportLists').append('<tbody>' + row + '</tbody>');
        $('#tblTansportLists tfoot th').each(function () {
            var title = $(this).text();
            $(this).html('<input type="text" placeholder="Search ' + title + '" />');
        });
        var table = $('#tblTansportLists').DataTable({
            "aoColumnDefs": [{ 'bSortable': true }],
            "scrollX": true,
            dom: 'Blfrtip',
            buttons: [
               {
                   extend: 'excel',
                   title: 'TansportList',
                   exportOptions: {
                       columns: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]
                   }
               }
            ]

        });



        $('#tblTansportLists_filter input').on('keyup', function () {
            table
                .search(this.value)
                .draw();
        });
        table.columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                that
                    .search( this.value )
                    .draw();
            } );
        } );


    },
    error: function (response) {
        ShowMessage(response.status + ' ' + response.statusText, 'Error');
    }
});

}

**

Transport id	TransportName	Tin No	Contact Person	Email Id	Contact No	Bank Name	Account No	RTGS No	Branch	Pan No	Address Line	Country	State	City	Status	Action
TransportName	Tin No	Contact Person	Email_Id	Contact No	Bank Name	Account No	RTGS No	Branch	Pan No	Address Line	Country	State	City	Status	Action

**

Please any one help me what is the wrong

murugan11

This is my html code

Transport id	TransportName	Tin No	Contact Person	Email Id	Contact No	Bank Name	Account No	RTGS No	Branch	Pan No	Address Line	Country	State	City	Status	Action
TransportName	Tin No	Contact Person	Email_Id	Contact No	Bank Name	Account No	RTGS No	Branch	Pan No	Address Line	Country	State	City	Status	Action