ASP.NET MVC Individual Search Columns

ASP.NET MVC Individual Search Columns

arosnerarosner Posts: 35Questions: 8Answers: 1
edited December 2023 in Free community support

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

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 21,337Questions: 26Answers: 4,953

    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

  • arosnerarosner Posts: 35Questions: 8Answers: 1
    edited December 2023

    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

  • kthorngrenkthorngren Posts: 21,337Questions: 26Answers: 4,953

    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

  • arosnerarosner Posts: 35Questions: 8Answers: 1

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

  • kthorngrenkthorngren Posts: 21,337Questions: 26Answers: 4,953
    Answer ✓

    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

  • arosnerarosner Posts: 35Questions: 8Answers: 1

    Thank you.! This issue can be closed.

Sign In or Register to comment.