Replies

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2

  You will need the draw() call in line 19 to execute the search plugin on line 13. However you are removing it on line 20 so the next draw (search, sort, page) won't apply the search plugin.

  To properly use the search plugin you will want a way to toggle whether the plugin is applied or not. Usually I use a conditional in the plugin to determine if the code should be executed and initialize the plugin before Datatables is initialized. Something like this:

  $(document).ready(function () {
      var filterTable = false;
  
      $.fn.dataTable.ext.search.push(
          function (settings, data, dataIndex) {
  
              // Check filter table flag
              if (! filterTable) {
                  return true;  // Always return true if not filtering the table.
              }
  
              // Otherwise compare the data for display
              var threshold = 1;
              var colIdx = 4; // 4th column (first col has index of 0)
              return (data[colIdx] < threshold);
          }
      );
   
      var datatable = $('#tblObjects').DataTable();
   
      $("#filterTables").click(function () {
          filterTable = ! filterTable;  // toggle filter flag
          datatable.draw();  // Execute the search plugin
      });
   
  });
  

  A simpler approach might be to use column().search(), for example:

      $("#filterTables").click(function () {
          datatable.column(4).search("1").draw();
      });
  

  You may need a way to reset the search by passing an empty string to column().search(), for example:

  datatable.column(4).search("").draw();
  

  Kevin
• KMiller68 Posts: 19Questions: 2Answers: 0

  January 2

  Thank you for the kind reply. I've gone over this to understand what's going on, and substituted both versions into my code. Unfortunately, I'm getting the same result with both; an empty table.

  Is the "draw" possibly forcing this to get data from the source, rather than working with the table "in memory" as it were?
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2

  Sorry I just realized you checking for less than the threshold, not equal to. Here is a search plugin example of what I proposed above:
  https://live.datatables.net/cefapano/1/edit

  Is the "draw" possibly forcing this to get data from the source, rather than working with the table "in memory" as it were?

  Only if you are using server side processing, ie serverSide: true. Your code above doesn't show this enabled. Search plugins are only supported in client side processing.

  var colIdx = 4; // 4th column (first col has index of 0)

  colIdx = 4 is actually the fifth column. Is that the issue?

  If the test case doesn't help then please provide a link to a page or update my example that shows the issue so we can help debug.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• KMiller68 Posts: 19Questions: 2Answers: 0

  January 3

  Thank you again. I'm working on this now, but it still isn't functioning. I'll post the code as I currently have it shortly.
• KMiller68 Posts: 19Questions: 2Answers: 0

  January 3

  Here is the current code. Column 4 is correct for filtering. What I've found with this is that clicking on the link to do the filter/search still returns an empty grid, but clicking on the "Show All" option returns the full set of data, as though the filtering code is doing SOMETHING:

  $(document).ready(function () {
      var filterTable = false;
  
      $.fn.dataTable.ext.search.push(
          function (settings, data, dataIndex) {
  
              // Check filter table flag
              if (!filterTable) {
                  return true;  // Always return true if not filtering the table.
              }
  
              // Otherwise compare the data for display
              var threshold = '0';
              var colIdx = 4; // 4th column (first col has index of 0)
              return (data[colIdx] = threshold);
          }
      );
  
      //var datatable = $('#tblObjects').DataTable();
  
      var table = new DataTable('#tblObjects');
  
      $("#filterTables").click(function () {
          filterTable = !filterTable;  // toggle filter flag
          table.draw();  // Execute the search plugin
  
      });
  
      $("#filterNone").click(function () {
  
          // Check filter table flag
          if (filterTable) {
              filterTable = !filterTable;  // toggle filter flag
              datatable.column(4).search("").draw();  // Always return true if not filtering the table.
          }
  
          
          /*table.draw();  // Execute the search plugin*/
  
      });
  
  });
  
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 3

  One problem is your if statement is incorrect. You have this:

  return (data[colIdx] = threshold);
  

  If statements need either == or === for comparison. Using a single = is an assignment operation.

  If this doesn't help then plugin will need to debugging. You can place a debugger breakpoint on line 15 to help see why the comparison isn't working as expected. For us to help debug we will need to see a test case with an example of your data.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• KMiller68 Posts: 19Questions: 2Answers: 0

  January 4

  This still isn't functioning. I've gone through several variations; changing column numbers to ensure I'm looking at the correct one, checking different values in that column, string vs integer, with no success. It continues to act as though the filtering code is doing something, and the "clear filter" code restores the full grid. Do I have this in the right place; within the "document ready" function? Is there something different because I'm loading this from an initial SQL Server call?

  I can see about creating a test case through the link provided, but the example data setup isn't how I'm creating this table, so I'm not sure it will duplicate what I'm seeing.
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 4 edited January 4

  What you have in the previous code snippet looks ok.

  The actual server data source doesn't matter to Datatables. Datatables has no knowledge of whether its a SQL DB or a text file. I'm guessing, based on your code snippets, you are building an HTML table with data from the SQL DB. Is this true? If so try using the browser's View Source option and copy part or all of the HTML table into a test case.

  Is the data in column 4 wrapped in HTML tags?

  Also in your #filterNone click event I think all you need to do is set filterTable false and call draw(), like this:

      $("#filterNone").click(function () {
   
          filterTable = false;
          table.draw();  // Execute the search plugin
   
      });
  

  Kevin