mlin01

mlin01

1. In datatable.js 2.1.8, the search function does not search anything.
2. How to customize the search function for the built in search box? In my table, some TD has input[text] and select, I want to search the input only.

Thanks,

Michael

kthorngren

In datatable.js 2.1.8, the search function does not search anything.

The search input works in this example. Please provide more information about your environment and why you think the search function doesn't work. Better is a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

How to customize the search function for the built in search box? In my table, some TD has input[text] and select, I want to search the input only.

You may need to use cell().invalidate() to update the inputs. Here is an example:
https://live.datatables.net/zukacehi/1/edit

Depending on your table data you might be able to use /columns.searchable to disable searching of columns with the select inputs.

If you still need help then please provide a test case showing the inputs you want to search.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mlin01

Thanks for the reply. Below is my *.cshtml content and js code, the sorting is working, but search does not work.

@model LookupModel
@{
   ViewData["Title"] = "Lookup";
}

@*<style>
   .no-arrow {
      /* Appearance-related styles */
      appearance: none; /* For modern browsers */
      -webkit-appearance: none; /* For Safari and Chrome */
      -moz-appearance: none; /* For Firefox */
   }
</style>*@

<h1 class="mt-3">Lookup Values</h1>
<hr />



<div class="mt-3 w-75 mx-auto">
   <div class="d-flex justify-content-start align-items-center">
      <div>
         <button class="btn btn-primary" onclick="createNewLookup()">
            Add Lookup
         </button>
      </div>
      <div id="divNewLookup" class="d-none fw-bold d-flex justify-content-center ms-3 border border-2 p-2">
         <div class="d-flex align-items-center">
            <label for="newCategory">Lookup Value:</label>
            <select class="ms-2" id="newCategory">
               @foreach (var category in Model.Categories)
               {
                  <option value="@category.TypeID">@category.Description</option>
               }
            </select>
            <label for="newDespt" class="mx-1">Description: </label>
            <input type="text" id="newDespt" />
         </div>
         <button id="saveNew" class="btn btn-primary mx-3" data-action="@Url.Action("InsertLookup", "Home")" onclick="saveNewLookup()">Save</button>


         <button class="btn btn-primary" onclick="cancelCreateLookup()">Cancel</button>
      </div>
   </div>

   <table id="LookupTble" class="table table-sm table-bordered table-hover table-striped">
      <thead>
         <tr>
            <th>Category</th>
            <th>Description</th>
            <th>Active</th>
            <th></th>
         </tr>
      </thead>
      <tbody>
         @foreach (var item in Model.Lookups)
         {
            <tr data-TypeId="@item.TypeID">
               <td>
                  <input id="txtCategory" class="border-0 w-100" type="text" value="@item.Category" disabled />
               </td>
               <td>
                  <input id="txtDespt" class="border-0 w-100" type="text" value="@item.Description" disabled />
               </td>
               <td>
                  @{
                     var bActive = item.Active ? "Yes" : "No";
                  }
                  <input id="txtActive" class="border-0 w-100" type="text" value="@bActive" disabled />
                  <select id="selActive" class="border-0 d-none">
                     @if (item.Active)
                     {
                        <option value="Yes" selected>Yes</option>
                        <option value="No">No</option>
                     }
                     else
                     {
                        <option value="Yes" >Yes</option>
                        <option value="No" selected>No</option>
                     }
                  </select>
               </td>
               <td>
                  <div class="d-flex justify-content-center align-items-center">
                     <button id="btnEdit" class="btn btn-sm btn-primary " onclick="editLookup($(this))">
                        Edit
                     </button>
                     <button id="btnSave" class="btn btn-sm btn-primary mx-1 d-none" onclick="saveLookup($(this))">
                        Save
                     </button>
                     <button id="btnCancel" class="btn btn-sm btn-primary d-none" onclick="cancelLookup($(this))">
                        Cancel
                     </button>
                  </div>
               </td>
            </tr>
         }
      </tbody>
   </table>
</div>

@section scripts{
   <script type="text/javascript" src="~/js/Lookup.js"></script>
}

and js function

$(function () {
   var table = $('#LookupTble').DataTable({
      "columnDefs": [
         { "orderable": false, "targets": [3] },
         { "orderDataType": "dom-text", "targets": [1, 2] }
      ],
      "bInfo": false,
      "bDestroy": true,
      "bPaginate": false
   });

   // Define custom ordering for text inputs (for sorting)
   $.fn.dataTable.ext.order['dom-text'] = function (settings, col) {
      return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
         return $('input[type="text"]', td).val(); // Only consider input[type="text"]
      });
   };


});

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

mlin01

Just upload the data table debugger, debugger code is: ubatof

kthorngren

Only the developer has access to the debugger output. It may or may not have the HTML table in the output. Possibly you can use the browser's view the source option and copy a few rows of the HTML table and your Datatables config into this template:
https://live.datatables.net/

Does the search work for the first two columns but not the third or does it not work at all?

Is the problem that the search doesn't work after updating the input?

Have you tried the code provided in my example to keep the input value and Datatables search cache updated with cell().invalidate()? Specifically this code:

$( '#example' ).on( 'change', 'input', function () {
  //Get the cell of the input
  var cell = $(this).closest('td');

  //update the input value
  $(this).attr('value', $(this).val());

  //invalidate the DT cache
  table.cell($(cell)).invalidate().draw();
            
} );

Kevin

allan

This is what a row's HTML looks like:

["<input id=\"txtCategory\" class=\"border-0 w-100\" type=\"text\" value=\"Academic Group\" disabled=\"\">", "<input id=\"txtDespt\" class=\"border-0 w-100\" type=\"text\" value=\"aaa\" disabled=\"\">", "<input id=\"txtActive\" class=\"border-0 w-100\" type=\"text\" value=\"Yes\" disabled=\"\">
                  <select id=\"selActive\" class=\"border-0 d-none\">
                        <option value=\"Yes\" selected=\"\">Yes</option>
                        <option value=\"No\">No</option>
                  </select>", "<div class=\"d-flex justify-content-center align-items-center\">
                     <button id=\"btnEdit\" class=\"btn btn-sm btn-primary \" onclick=\"editLookup($(this))\">
                        Edit
                     </button>
                     <button id=\"btnSave\" class=\"btn btn-sm btn-primary mx-1 d-none\" onclick=\"saveLookup($(this))\">
                        Save
                     </button>
                     <button id=\"btnCancel\" class=\"btn btn-sm btn-primary d-none\" onclick=\"cancelLookup($(this))\">
                        Cancel
                     </button>
                  </div>"]

The key thing here is that input and select in the first column.

Live DOM elements do not get searched by DataTables. There might be a way through data invalidation, but it isn't something I've looked into I'm afraid.

Allan

mlin01

Can someone point to me where in the code the search is executed?

kthorngren

The Datatables search functionality is quite complicated so showing you the code probably won't be very useful. But I believe if you search for the function _fnFilter in datatables.js you will see the core part of the code.

I think the easiest option would be to separate the text input and select inputs into different columns. Then possibly the solution with cell().invalidate() I presented above would work..
https://live.datatables.net/zukacehi/1/edit

Another option is to add a hidden column, using columns.visible, that contains the value of the text input. This can be searched while disabling search of the combined column using columns.searchable.

A third option might be to use search.fixed() to extract the text input value of the combined column to compare with the search term. This might have some performance impacts since the DOM nodes will be accessed for each row each time the search is executed.

If you want help with this please provide a simple test case with an example of a few rows of data. This way we can help with providing a running example that may work for you.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kthorngren

I had a few minutes to put together this simple example:
https://live.datatables.net/zukacehi/116/edit

It has a text input and select input in the same column. It uses columns.render for the combined column to get the text input to set Orthogonal data for the filter operation.

Note also the need for the change event to update the Datatables data cache with the update text inputs.

If you still need help then please update my test case or create your own with an example of your solution so we can provide more specific suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

mlin01

Thank you, thank you all.