ASP.NET MVC Individual Search Columns

arosner

I am trying to work with a variant of the Individual Search Columns example (https://datatables.net/examples/api/multi_filter.html). The view appears properly. However, I have 2 issues:

1) When I start typing in any search box, there is a call to the controller method for every keystroke. The desire is to call the controller method with the entire search string when "enter" is pressed. I assume the behavior is in the javascript initComplete method call. Are there existing examples of the desired functionality?

        function bindDatatable() {
            datatable = $('#tableData')
                .DataTable({
                    "processing": true, // for show progress bar
                    "serverSide": true, // for process server side
                    "filter": false, // this is for disable filter (search box)
                    "pageLength": 10,
                    "ajax": {
                        "url": "/DatabaseTables/LoadData",
                        "type": "POST",
                        "datatype": "json"
                    },
                    "language": {
                        "emptyTable": "No record found.",
                        "processing":
                            '<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
                    },
                    initComplete: function () {
                        this.api()
                            .columns()
                            .every(function () {
                                let column = this;
                                let title = column.footer().textContent;

                                // Create input element
                                let input = document.createElement('input');
                                input.placeholder = title;
                                column.footer().replaceChildren(input);

                                // Event listener for user input
**                                input.addEventListener('keyup', () => {
                                    if (column.search() !== this.value) {
                                        column.search(input.value).draw();
                                    }
                                });
**                            });
                    },
                    "columns": [
                        @foreach (var item in Model.DatabaseTableColumns)
                        {
                            <text>
                            {
                                "data": "@Html.DisplayFor(modelItem => item.COLUMN_NAME)",
                                "autoWidth": true,
                                "searchable": true,
                            },
                            </text>
                        }
                    ]
                });
        }

2) When the controller method is called, I do not see the search string typed. I expected to see it in the request for variable columns[<zero based search column number>][search][value]. However the value is always empty.

Thank you!

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

kthorngren

The desire is to call the controller method with the entire search string when "enter" is pressed.

Use change instead of keyup. Here is a simple example with your code but modified to use change.
https://live.datatables.net/qoliyehi/89/edit

I expected to see it in the request for variable columns[<zero based search column number>][search][value]. However the value is always empty.

Where are you looking for this. In my example use the browser's network inspector tool to see what parameters are sent. For example, after typing cox:

It could be the request isn't parsed properly? I'm not familiar with ASP.NET MVC to know how to do this. Let us know what you find.

Kevin

arosner

The request payload from the network tab of the Edge browser looks like the following (I typed in 115.53 in column 0). There is no sign of the input.

columns[0][data]: testdecimal
columns[0][name]:
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]:
columns[0][search][regex]: false
columns[1][data]: testfloat
columns[1][name]:
columns[1][searchable]: true
columns[1][orderable]: true
columns[1][search][value]:
columns[1][search][regex]: false
columns[2][data]: testint
columns[2][name]:
columns[2][searchable]: true
columns[2][orderable]: true
columns[2][search][value]:
columns[2][search][regex]: false
columns[3][data]: testmoney
columns[3][name]:
columns[3][searchable]: true
columns[3][orderable]: true
columns[3][search][value]:
columns[3][search][regex]: false
columns[4][data]: testsmallint
columns[4][name]:
columns[4][searchable]: true
columns[4][orderable]: true
columns[4][search][value]:
columns[4][search][regex]: false
columns[5][data]: testtinyint
columns[5][name]:
columns[5][searchable]: true
columns[5][orderable]: true
columns[5][search][value]:
columns[5][search][regex]: false
columns[6][data]: testString
columns[6][name]:
columns[6][searchable]: true
columns[6][orderable]: true
columns[6][search][value]:
columns[6][search][regex]: false
columns[7][data]: testBit
columns[7][name]:
columns[7][searchable]: true
columns[7][orderable]: true
columns[7][search][value]:
columns[7][search][regex]: false
columns[8][data]: testDateTime
columns[8][name]:
columns[8][searchable]: true
columns[8][orderable]: true
columns[8][search][value]:
columns[8][search][regex]: false
columns[9][data]: testVarchar
columns[9][name]:
columns[9][searchable]: true
columns[9][orderable]: true
columns[9][search][value]:
columns[9][search][regex]: false
columns[10][data]: testDate
columns[10][name]:
columns[10][searchable]: true
columns[10][orderable]: true
columns[10][search][value]:
columns[10][search][regex]: false
columns[11][data]: testTime
columns[11][name]:
columns[11][searchable]: true
columns[11][orderable]: true
columns[11][search][value]:
columns[11][search][regex]: false
order[0][column]: 0
order[0][dir]: asc
start: 0
length: 10
search[value]:
search[regex]: false

kthorngren

I missed it before but you have filter: false, which is undocumented but is the same as the searching option. This turns off all Datatables searching capabilities including column().search(). Remove this option and the column searches should work. You can use the dom option, ie remove f from the string, if you want to remove the default search input.

Kevin

arosner

Thank you! Not great at javascript. Can you be more specific regarding how to remove the global search box?

kthorngren

Take a look at the dom docs. It documents what each letter in the string is. The default is lfrtip. Remove the f from the string so it looks like this:

dom: 'lrtip',

If you are using a styling framework then do the same with the default string. Make sure to remove the div markers. For example Bootstrap 5 would look like this:

"<'row'<'col-sm-12 col-md-6'l>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",

Kevin

arosner

Thank you.! This issue can be closed.