Individual Column search on fixed columns is not working

Jag123

var table = $("#myDataTable").DataTable({
    dom:'<"toolbar">lBfrtip',
    destroy: true,
    stateSave: true,
    buttons: [
     {
         extend: 'excel',
         title: GetFileName()
     }],
    "scrollX": true,
    fixedColumns: {
        leftColumns: 2
    },
    orderCellsTop: true,
    "ajax": {
        "url": "/Support/GetTicketList",
        "type": "POST",
        data: {
            status: $("#TicketStatus option:selected").val()
        },
        "datatype": "json"
    },
    "processing": true, // for show progress bar
    //"serverSide": true, // for process server side
    "filter": true, // this is for disable filter (search box)
    "orderMulti": true, // for disable multiple column at once
    "columnDefs":
    [
        {
            "targets": 0,
            "visible": true,
            "searchable": true,
            "orderable": false,
        },
        { type: 'date', targets: [5] }
    ],
    "columns": [
             {
                 "render": function (data, type, full, meta)
                 { return '<a class=""  href="/Support/TicketDetails/' + full.Ticket + '">Details</a>'; }, width: '5%'
             },
              { "data": "Ticket", "name": "Ticket", "autoWidth": true },
              { "data": "Description", "name": "Description", width:'15%' },
              { "data": "Status", "name": "Status", "autoWidth": true },
               { "data": "Reason", "name": "Reason", "autoWidth": true },
              { "data": "EntryDate", "name": "Entry date", "autoWidth": true},
              { "data": "SubCategory", "name": "Subcategory", "autoWidth": true },
               { "data": "EnteredbyUser", "name": "EnteredbyUser", "autoWidth": true },
              { "data": "Company", "name": "Company", "autoWidth": true },
               { "data": "Building", "name": "Building", "autoWidth": true }
    ]
});

}

    ///////Individual Column Search
    // Setup - add a text input to each footer cell
    $('#myDataTable thead tr').clone(true).appendTo('#myDataTable thead');
    $('#myDataTable thead tr:eq(1) th').each(function (i) {
        var title = $(this).text();
        if (title != '') {
            $(this).html('<input type="text" style="width:125px" placeholder="Search ' + title + '"  data-index="' + i + '"/>');
        }
    });
    $('#myDataTable thead tr:eq(1) th').each(function (i) {
        $('input', this).on('keyup change', function () {
            if (table.column(i).search() !== this.value) {
                var text = this.value;
                if (text.charAt(0) == "^" && text.length > 1) {
                    var test = this.value.substr(1);
                    table
                   .column(i)
                   .search("^((?!" + this.value.substr(1) + ").)*$", true, true, true)
                   .draw();
                }
                else {
                    table
                   .column(i)
                   .search(this.value)
                   .draw();
                }
            }
        });
    });


    <div class="col-md-12">
        <table id="myDataTable" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th></th>
                    <th>Ticket</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Reason</th>
                    <th>Entry Date</th>
                    <th>Subcategory</th>
                    <th>Contact</th>
                    <th>Company</th>
                    <th>Building</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th></th>
                    <th>Ticket</th>
                    <th>Description</th>
                    <th>Status</th>
                    <th>Reason</th>
                    <th>Entry Date</th>
                    <th>Subcategory</th>
                    <th>Contact</th>
                    <th>Company</th>
                    <th>Building</th>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

</div>

Indivisual column search on fixed columns is not working please help. Thanks!

colin

Hi @Jag123 ,

I just tried it here and it looks fine to me. Could you link to a test case demonstrating the problem, please.

Cheers,

Colin