Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>The 3 steps needed should be:</p> <ul> <li>create the UI</li> <li>write a filtering function</li> <li>setup events to redraw the DataTable when the UI changes</li> </ul> <p>First create the UI. For me, the easiest way to capture the user's intent is to use a select box where the user can pick which comparison operator he wants to use:</p> <pre><code>&lt;select id="filter_comparator"&gt; &lt;option value="eq"&gt;=&lt;/option&gt; &lt;option value="gt"&gt;&amp;gt;=&lt;/option&gt; &lt;option value="lt"&gt;&amp;lt;=&lt;/option&gt; &lt;option value="ne"&gt;!=&lt;/option&gt; &lt;/select&gt; &lt;input type="text" id="filter_value"&gt; </code></pre> <p>Now, you need to push a function into the set of filters. The function simply grabs the specified comparison operator and uses it to compare the row data with the value entered. It should return true if a row should stay visible and return false if it should go away based on the filter. If the user doesn't enter a valid number it returns true. Change the column_index to the appropriate value:</p> <pre><code>$.fn.dataTableExt.afnFiltering.push( function( oSettings, aData, iDataIndex ) { var column_index = 2; //3rd column var comparator = $('#filter_comparator').val(); var value = $('#filter_value').val(); if (value.length &gt; 0 &amp;&amp; !isNaN(parseInt(value, 10))) { value = parseInt(value, 10); var row_data = parseInt(aData[column_index], 10); switch (comparator) { case 'eq': return row_data == value ? true : false; break; case 'gt': return row_data &gt;= value ? true : false; break; case 'lt': return row_data &lt;= value ? true : false; break; case 'ne': return row_data != value ? true : false; break; } } return true; } ); </code></pre> <p>Finally, at the point where you create your DataTable, setup events on your UI elements to redraw the table when the user makes changes:</p> <pre><code>$(document).ready(function() { var oTable = $('#example').dataTable(); /* Add event listeners to the filtering inputs */ $('#filter_comparator').change( function() { oTable.fnDraw(); } ); $('#filter_value').keyup( function() { oTable.fnDraw(); } ); }); </code></pre> <hr> <p>ON THE OTHER HAND, if you would like the user to type the comparison operator instead of selecting it then you will need to parse their input. If you have a simple text box:</p> <pre><code>&lt;input type="text" id="filter"&gt; </code></pre> <p>Then you can parse the input in a filter function like this:</p> <pre><code>$.fn.dataTableExt.afnFiltering.push( function( oSettings, aData, iDataIndex ) { var filter = $('#filter').val().replace(/\s*/g, ''); var row_data = aData[3] == "-" ? 0 : aData[3]*1; if (filter.match(/^&lt;\d+$/)) { var num = filter.match(/\d+/); return row_data &lt; num ? true : false; } else if (filter.match(/^&gt;\d+$/)) { var num = filter.match(/\d+/); return row_data &gt; num ? true : false; } else if (filter.match(/^&lt;&gt;\d+$/)) { var num = filter.match(/\d+/); return row_data != num ? true : false; } else if (filter.match(/^\d+$/)) { var num = filter.match(/\d+/); return row_data == num ? true : false; } else if (filter.match(/^\d+-\d+$/)) { var num1 = filter.match(/^\d+/); var num2 = filter.match(/\d+$/); return (row_data &gt;= num1 &amp;&amp; row_data &lt;= num2) ? true : false; } return true; } ); </code></pre> <p>and a document ready:</p> <pre><code>$(document).ready(function() { var oTable = $('#example').dataTable(); /* Add event listeners to the filtering inputs */ $('#filter').keyup( function() { oTable.fnDraw(); } ); }); </code></pre> <p>This filter only works on positive integers. Decimals and negative number support would require more work. You could also extend the function to add >= and &lt;= support, or just make those the default behavior for > and &lt; depending on your user expectations. </p> <p>I've also once again attached the event listener to a free floating input text box. I've tried this with a basic DataTable and it works. You would need to attach the behavior to those text boxes at the bottom of your columns, but I'm not sure how you got them there - I've never done that with a DataTable.</p>
    singulars
    1. This table or related slice is empty.
    1. POjQuery DataTables filter column with comparison operators
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USttubrian
    1. USttubrian
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POjQuery DataTables filter column with comparison operators
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTBountyClose
    1. COVery nice summary! However, I was wondering if there was a way to parse the comparison operator directly from the filter inputs at the bottom of the table and then pass the rest to the comparison filter. I'll edit my post to include an image. I'm thinking that I would have to change function that is called on the keyup to look for an operator.
      singulars
      1. PO
      1. USDTing
    2. COCan you post the JS that you are using to create the DataTable?
      singulars
      1. PO
      1. USttubrian
    3. COI added input parsing to the answer. If you can show how you are achieving the filter boxes at the bottom of the image then maybe I can help you tie in my filter function. I've never had those at the bottom of one of my DataTables (I've only created very simple DataTables). I've noticed the dataTables.htmlColumnFilter.js plugin mentioned in some documentation, but I can't find where to actually download that script.
      singulars
      1. PO
      1. USttubrian
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload