Individual column searching (text inputs)

Qaammaar123

Hello, I am trying to implement individual column searching in my datatable. But I type in the search box, the screen displays "Processing" but does not display the search result.

My global datatable search works fine but not the column one. Can someone please help.

Below is the code and the screenshot. The data is dynamic, not hardcoded.

var theTable = "#DTTable";
DUserListTB = {
wTB: null,
init: function() {
wTB = $(theTable).dataTable({
//scrollY:'90vh',
//scrollCollapse: true,
//buttons: ['columnsToggle'],

        select: {
            style: 'single'
        },
        "oLanguage": {
            "sSearch": "(At least 4 characters long) Search:"
        },
        "lengthMenu": [
            [10, 25, 50, 100],
            [10, 25, 50, 100]
        ],
        "processing": true,
        "serverSide": true,
        "order": [
            [1, "itemId"]
        ],
        ajax: {
            "url": "/Industry/GetItemList",
            "type": "POST",
            "data": function(d) {
                let aVar = $("#dtAll").attr('data-click-state');
                //let aMySub = $("#mySub").attr('data-click-state');
                //let aUsergroup = $(this).attr('data-click-state')
                return $.extend({}, d, {
                    '__RequestVerificationToken': $('[name=__RequestVerificationToken]').val(),
                    'dtAll': aVar,
                    'usergrp':'@{@ViewBag.UserGroup}'

                })

            }
        },
       __** initComplete: function () {
                // Apply the search
                this.api()
                    .columns()
                    .every(function () {
                        var that = this;

                        $('input', this.footer()).on('keyup change clear', function () {
                            console.log('that.search(): ', that.search());
                        console.log('this.value: ', this.value);
                            if (that.search() !== this.value) {
                                that.search(this.value).draw();
                            }
                        });
                    });
            },**__
        createdRow: function(row, data, index) {
            $("td:last", row).attr("title", data.CreatedDT);
        },

        columns: [{
                "data": "itemID",
                "orderable": true,
                "visible": false
            },

             {
               "data": "status",
                "orderable": true,
                "visible": true,
                "render": function ( data, type, row, meta ) {
                     var aRush = "<i class='fa-solid fa-recycle' style='color:red'></i>";
                      var aBroke = "<i class='fa-solid fa-link-slash' style='color:red'></i>";
                        var aSubNoView ='<a href="@Url.Action("EditItemProfileGET", "Industry")?id=' + row.itemID + '" class="viewDSub lngDTclass"> ' + row.status + '</a>';
                        var result = aSubNoView;
                     if(gfIsStrSame(row.status,'Recycled'))
                        {
                           result = "<i style='background-color:red'></i>" + aRush + aSubNoView; 
                        }

                    if(gfIsStrSame(row.status,'End of Life'))
                        {
                           result = "<i style='background-color:red'></i>" + aBroke + aSubNoView; 
                        }
                        return result;
                }
            },
             {
               "data": "officeLoc",
                "orderable": true,
                "visible": false
            },

            {
               "data": "equipType",
                "orderable": true,
                "visible": true
            },
                {
               "data": "pcName",
                "orderable": true,
                "visible": true
            },
                {
               "data": "os",
                "orderable": true,
                "visible": false
            },
                {
               "data": "addEquip",
                "orderable": true,
                "visible": true
            },
            {
                "data": "make",
                "orderable": true,
                "visible": false
            },
            {
                "data": "model",
                "orderable": true,
                "visible": false
            },
            {
                "data": "serial",
                "orderable": true,
                "visible": false
            },
            {
                "data": "accuDate",
                "orderable": true,
                "visible": true
            },
            {
                "data": "displayName",
                "orderable": true,
                "visible": true
            },
            {
                "data": "addNotes",
                "orderable": true,
                "visible": false
            },
             {
                "data": "eMail",
                "orderable": true,
                "visible": false
            },
            {
                "data": "department",
                "orderable": true,
                "visible": true
            },

            {
                "data": "isactive",
                "orderable": true,
                "visible": true,
                "className": "DTSelect",
               },
refresh: function() {
    wTB.api().ajax.reload(null, false);
    TranslateFrench();
},
redraw: function() {
    wTB.fnDraw();
},
pmsg: function() {
    alert("test");
}

};
DUserListTB.init();

$('.dataTables_length label').addClass('trn')

var dtable = $(theTable).dataTable().api();

$( theTable + ' tbody').on('click', 'tr', function() {
$(this).toggleClass('selected');
});

/$('#DTTable').append(
$('<tfoot/>').append($('#DTTable' + " thead tr").clone())
);/

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

//$('#DTTable tfoot tr').appendTo('#DTTable thead');

// Grab the datatables input box and alter how it is bound to events
$(".dataTables_filter input")
.unbind() // Unbind previous default bindings
.bind("input", function(e) { // Bind our desired behavior
// If the length is 3 or more characters, or the user pressed ENTER, search
if (this.value.length >= 3 || e.keyCode == 13) {
// Call the API search function
dtable.search(this.value).draw();
}
// Ensure we clear the search if they backspace far enough
if (this.value == "") {
dtable.search("").draw();
}
return;
});

kthorngren

But I type in the search box, the screen displays "Processing" but does not display the search result.

You have server side processing enabled. Teh searches are expected ot be perfomred by the server. You will see ajax requests sent to the server for the column searches. Check the browser's console for errors and use the browser's network inspector to see the ajax request and response. Let us know what you find.

Kevin