title: Filter greater, minor or different values in an HTML table with DataTables
body: <p>In a previous post I asked how you can get filters from an HTML table and I was suggested <a href="https://datatables.net/" rel="nofollow noreferrer">https://datatables.net/</a></p>
  <p>After creating this HTML table by taking the code from various sources I can't get the filter for comparators, ie greater than, less than, different from</p>
  <p>This table can filter in ascending and descending order, can filter more elements in different columns but cannot filter all the greater values of, minors of, different from ...</p>
  <p>I attach my code (HTML-CSS-JAVASCRIPT).
  Can anyone help me please?</p>
  <p>HTML</p>
  <pre><code>&lt;!DOCTYPE html&gt;
      &lt;html lang=&quot;en&quot;&gt;
      &lt;head&gt;
        &lt;meta charset=&quot;UTF-8&quot;&gt;
        &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
        &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
        &lt;title&gt;Test Table Filter&lt;/title&gt;
        &lt;link href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot; integrity=&quot;sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3&quot; crossorigin=&quot;anonymous&quot;&gt;
        &lt;link rel=&quot;stylesheet&quot; href=&quot;/cssMyTable.css&quot;&gt;
        &lt;script
              src=&quot;https://code.jquery.com/jquery-3.6.0.slim.min.js&quot;
              integrity=&quot;sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=&quot;
              crossorigin=&quot;anonymous&quot;&gt;
        &lt;/script&gt;
        &lt;script src=&quot;//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js&quot;&gt;&lt;/script&gt;
        &lt;script src=&quot;/jsMyTable.js&quot;&gt;&lt;/script&gt;
      
      &lt;/head&gt;
      &lt;body&gt;
        &lt;p style=&quot;text-align: center&quot;&gt;
          This Fiddle was forked by &lt;a href=&quot;https://stackoverflow.com/users/9217760/sally-cj&quot;&gt;Sally&lt;/a&gt;, for &lt;a href=&quot;https://stackoverflow.com/q/49846701/9217760&quot;&gt;this Stack Overflow question&lt;/a&gt;. &lt;small&gt;&lt;a href=&quot;https://jsfiddle.net/jvretamero/bv6g0r64/&quot;&gt;See the original Fiddle&lt;/a&gt;.&lt;/small&gt;
        &lt;/p&gt;
        
        &lt;hr/&gt;
        &lt;div class=&quot;wrapper&quot;&gt;
          &lt;table id=&quot;example&quot; class=&quot;display table table-success table-striped table-hover&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;
              &lt;thead class=&quot;fisso&quot;&gt;
                  &lt;tr class=&quot;text-center text-uppercase&quot;&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Position&lt;/th&gt;
                      &lt;th&gt;Office&lt;/th&gt;
                      &lt;th&gt;Age&lt;/th&gt;
                      &lt;th&gt;Start date&lt;/th&gt;
                      &lt;th&gt;Salary&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tfoot&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Name&lt;/th&gt;
                      &lt;th&gt;Position&lt;/th&gt;
                      &lt;th&gt;Office&lt;/th&gt;
                      &lt;th&gt;Age&lt;/th&gt;
                      &lt;th&gt;Start date&lt;/th&gt;
                      &lt;th&gt;Salary&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/tfoot&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Tiger Nixon&lt;/td&gt;
                      &lt;td&gt;System Architect&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;61&lt;/td&gt;
                      &lt;td&gt;2011/04/25&lt;/td&gt;
                      &lt;td&gt;$320,800&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Garrett Winters&lt;/td&gt;
                      &lt;td&gt;Accountant&lt;/td&gt;
                      &lt;td&gt;Tokyo&lt;/td&gt;
                      &lt;td&gt;63&lt;/td&gt;
                      &lt;td&gt;2011/07/25&lt;/td&gt;
                      &lt;td&gt;$170,750&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Ashton Cox&lt;/td&gt;
                      &lt;td&gt;Junior Technical Author&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;2009/01/12&lt;/td&gt;
                      &lt;td&gt;$86,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Cedric Kelly&lt;/td&gt;
                      &lt;td&gt;Senior Javascript Developer&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2012/03/29&lt;/td&gt;
                      &lt;td&gt;$433,060&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Airi Satou&lt;/td&gt;
                      &lt;td&gt;Accountant&lt;/td&gt;
                      &lt;td&gt;Tokyo&lt;/td&gt;
                      &lt;td&gt;33&lt;/td&gt;
                      &lt;td&gt;2008/11/28&lt;/td&gt;
                      &lt;td&gt;$162,700&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Brielle Williamson&lt;/td&gt;
                      &lt;td&gt;Integration Specialist&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;61&lt;/td&gt;
                      &lt;td&gt;2012/12/02&lt;/td&gt;
                      &lt;td&gt;$372,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Herrod Chandler&lt;/td&gt;
                      &lt;td&gt;Sales Assistant&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;59&lt;/td&gt;
                      &lt;td&gt;2012/08/06&lt;/td&gt;
                      &lt;td&gt;$137,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Rhona Davidson&lt;/td&gt;
                      &lt;td&gt;Integration Specialist&lt;/td&gt;
                      &lt;td&gt;Tokyo&lt;/td&gt;
                      &lt;td&gt;55&lt;/td&gt;
                      &lt;td&gt;2010/10/14&lt;/td&gt;
                      &lt;td&gt;$327,900&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Colleen Hurst&lt;/td&gt;
                      &lt;td&gt;Javascript Developer&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;39&lt;/td&gt;
                      &lt;td&gt;2009/09/15&lt;/td&gt;
                      &lt;td&gt;$205,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Sonya Frost&lt;/td&gt;
                      &lt;td&gt;Software Engineer&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;23&lt;/td&gt;
                      &lt;td&gt;2008/12/13&lt;/td&gt;
                      &lt;td&gt;$103,600&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Jena Gaines&lt;/td&gt;
                      &lt;td&gt;Office Manager&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;30&lt;/td&gt;
                      &lt;td&gt;2008/12/19&lt;/td&gt;
                      &lt;td&gt;$90,560&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Quinn Flynn&lt;/td&gt;
                      &lt;td&gt;Support Lead&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2013/03/03&lt;/td&gt;
                      &lt;td&gt;$342,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Charde Marshall&lt;/td&gt;
                      &lt;td&gt;Regional Director&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;36&lt;/td&gt;
                      &lt;td&gt;2008/10/16&lt;/td&gt;
                      &lt;td&gt;$470,600&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Haley Kennedy&lt;/td&gt;
                      &lt;td&gt;Senior Marketing Designer&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;43&lt;/td&gt;
                      &lt;td&gt;2012/12/18&lt;/td&gt;
                      &lt;td&gt;$313,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Tatyana Fitzpatrick&lt;/td&gt;
                      &lt;td&gt;Regional Director&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;19&lt;/td&gt;
                      &lt;td&gt;2010/03/17&lt;/td&gt;
                      &lt;td&gt;$385,750&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Michael Silva&lt;/td&gt;
                      &lt;td&gt;Marketing Designer&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;66&lt;/td&gt;
                      &lt;td&gt;2012/11/27&lt;/td&gt;
                      &lt;td&gt;$198,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Paul Byrd&lt;/td&gt;
                      &lt;td&gt;Chief Financial Officer (CFO)&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;64&lt;/td&gt;
                      &lt;td&gt;2010/06/09&lt;/td&gt;
                      &lt;td&gt;$725,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Gloria Little&lt;/td&gt;
                      &lt;td&gt;Systems Administrator&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;59&lt;/td&gt;
                      &lt;td&gt;2009/04/10&lt;/td&gt;
                      &lt;td&gt;$237,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Bradley Greer&lt;/td&gt;
                      &lt;td&gt;Software Engineer&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;41&lt;/td&gt;
                      &lt;td&gt;2012/10/13&lt;/td&gt;
                      &lt;td&gt;$132,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Dai Rios&lt;/td&gt;
                      &lt;td&gt;Personnel Lead&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;35&lt;/td&gt;
                      &lt;td&gt;2012/09/26&lt;/td&gt;
                      &lt;td&gt;$217,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Jenette Caldwell&lt;/td&gt;
                      &lt;td&gt;Development Lead&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;30&lt;/td&gt;
                      &lt;td&gt;2011/09/03&lt;/td&gt;
                      &lt;td&gt;$345,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Yuri Berry&lt;/td&gt;
                      &lt;td&gt;Chief Marketing Officer (CMO)&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;40&lt;/td&gt;
                      &lt;td&gt;2009/06/25&lt;/td&gt;
                      &lt;td&gt;$675,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Caesar Vance&lt;/td&gt;
                      &lt;td&gt;Pre-Sales Support&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;21&lt;/td&gt;
                      &lt;td&gt;2011/12/12&lt;/td&gt;
                      &lt;td&gt;$106,450&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Doris Wilder&lt;/td&gt;
                      &lt;td&gt;Sales Assistant&lt;/td&gt;
                      &lt;td&gt;Sidney&lt;/td&gt;
                      &lt;td&gt;23&lt;/td&gt;
                      &lt;td&gt;2010/09/20&lt;/td&gt;
                      &lt;td&gt;$85,600&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Angelica Ramos&lt;/td&gt;
                      &lt;td&gt;Chief Executive Officer (CEO)&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;47&lt;/td&gt;
                      &lt;td&gt;2009/10/09&lt;/td&gt;
                      &lt;td&gt;$1,200,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Gavin Joyce&lt;/td&gt;
                      &lt;td&gt;Developer&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;42&lt;/td&gt;
                      &lt;td&gt;2010/12/22&lt;/td&gt;
                      &lt;td&gt;$92,575&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Jennifer Chang&lt;/td&gt;
                      &lt;td&gt;Regional Director&lt;/td&gt;
                      &lt;td&gt;Singapore&lt;/td&gt;
                      &lt;td&gt;28&lt;/td&gt;
                      &lt;td&gt;2010/11/14&lt;/td&gt;
                      &lt;td&gt;$357,650&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Brenden Wagner&lt;/td&gt;
                      &lt;td&gt;Software Engineer&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;28&lt;/td&gt;
                      &lt;td&gt;2011/06/07&lt;/td&gt;
                      &lt;td&gt;$206,850&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Fiona Green&lt;/td&gt;
                      &lt;td&gt;Chief Operating Officer (COO)&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;48&lt;/td&gt;
                      &lt;td&gt;2010/03/11&lt;/td&gt;
                      &lt;td&gt;$850,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Shou Itou&lt;/td&gt;
                      &lt;td&gt;Regional Marketing&lt;/td&gt;
                      &lt;td&gt;Tokyo&lt;/td&gt;
                      &lt;td&gt;20&lt;/td&gt;
                      &lt;td&gt;2011/08/14&lt;/td&gt;
                      &lt;td&gt;$163,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Michelle House&lt;/td&gt;
                      &lt;td&gt;Integration Specialist&lt;/td&gt;
                      &lt;td&gt;Sidney&lt;/td&gt;
                      &lt;td&gt;37&lt;/td&gt;
                      &lt;td&gt;2011/06/02&lt;/td&gt;
                      &lt;td&gt;$95,400&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Suki Burks&lt;/td&gt;
                      &lt;td&gt;Developer&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;53&lt;/td&gt;
                      &lt;td&gt;2009/10/22&lt;/td&gt;
                      &lt;td&gt;$114,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Prescott Bartlett&lt;/td&gt;
                      &lt;td&gt;Technical Author&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;27&lt;/td&gt;
                      &lt;td&gt;2011/05/07&lt;/td&gt;
                      &lt;td&gt;$145,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Gavin Cortez&lt;/td&gt;
                      &lt;td&gt;Team Leader&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;22&lt;/td&gt;
                      &lt;td&gt;2008/10/26&lt;/td&gt;
                      &lt;td&gt;$235,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Martena Mccray&lt;/td&gt;
                      &lt;td&gt;Post-Sales support&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;46&lt;/td&gt;
                      &lt;td&gt;2011/03/09&lt;/td&gt;
                      &lt;td&gt;$324,050&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Unity Butler&lt;/td&gt;
                      &lt;td&gt;Marketing Designer&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;47&lt;/td&gt;
                      &lt;td&gt;2009/12/09&lt;/td&gt;
                      &lt;td&gt;$85,675&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Howard Hatfield&lt;/td&gt;
                      &lt;td&gt;Office Manager&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;51&lt;/td&gt;
                      &lt;td&gt;2008/12/16&lt;/td&gt;
                      &lt;td&gt;$164,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Hope Fuentes&lt;/td&gt;
                      &lt;td&gt;Secretary&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;41&lt;/td&gt;
                      &lt;td&gt;2010/02/12&lt;/td&gt;
                      &lt;td&gt;$109,850&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Vivian Harrell&lt;/td&gt;
                      &lt;td&gt;Financial Controller&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;62&lt;/td&gt;
                      &lt;td&gt;2009/02/14&lt;/td&gt;
                      &lt;td&gt;$452,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Timothy Mooney&lt;/td&gt;
                      &lt;td&gt;Office Manager&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;37&lt;/td&gt;
                      &lt;td&gt;2008/12/11&lt;/td&gt;
                      &lt;td&gt;$136,200&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Jackson Bradshaw&lt;/td&gt;
                      &lt;td&gt;Director&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;65&lt;/td&gt;
                      &lt;td&gt;2008/09/26&lt;/td&gt;
                      &lt;td&gt;$645,750&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Olivia Liang&lt;/td&gt;
                      &lt;td&gt;Support Engineer&lt;/td&gt;
                      &lt;td&gt;Singapore&lt;/td&gt;
                      &lt;td&gt;64&lt;/td&gt;
                      &lt;td&gt;2011/02/03&lt;/td&gt;
                      &lt;td&gt;$234,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Bruno Nash&lt;/td&gt;
                      &lt;td&gt;Software Engineer&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;38&lt;/td&gt;
                      &lt;td&gt;2011/05/03&lt;/td&gt;
                      &lt;td&gt;$163,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Sakura Yamamoto&lt;/td&gt;
                      &lt;td&gt;Support Engineer&lt;/td&gt;
                      &lt;td&gt;Tokyo&lt;/td&gt;
                      &lt;td&gt;37&lt;/td&gt;
                      &lt;td&gt;2009/08/19&lt;/td&gt;
                      &lt;td&gt;$139,575&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Thor Walton&lt;/td&gt;
                      &lt;td&gt;Developer&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;61&lt;/td&gt;
                      &lt;td&gt;2013/08/11&lt;/td&gt;
                      &lt;td&gt;$98,540&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Finn Camacho&lt;/td&gt;
                      &lt;td&gt;Support Engineer&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;47&lt;/td&gt;
                      &lt;td&gt;2009/07/07&lt;/td&gt;
                      &lt;td&gt;$87,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Serge Baldwin&lt;/td&gt;
                      &lt;td&gt;Data Coordinator&lt;/td&gt;
                      &lt;td&gt;Singapore&lt;/td&gt;
                      &lt;td&gt;64&lt;/td&gt;
                      &lt;td&gt;2012/04/09&lt;/td&gt;
                      &lt;td&gt;$138,575&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Zenaida Frank&lt;/td&gt;
                      &lt;td&gt;Software Engineer&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;63&lt;/td&gt;
                      &lt;td&gt;2010/01/04&lt;/td&gt;
                      &lt;td&gt;$125,250&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Zorita Serrano&lt;/td&gt;
                      &lt;td&gt;Software Engineer&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;56&lt;/td&gt;
                      &lt;td&gt;2012/06/01&lt;/td&gt;
                      &lt;td&gt;$115,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Jennifer Acosta&lt;/td&gt;
                      &lt;td&gt;Junior Javascript Developer&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;43&lt;/td&gt;
                      &lt;td&gt;2013/02/01&lt;/td&gt;
                      &lt;td&gt;$75,650&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Cara Stevens&lt;/td&gt;
                      &lt;td&gt;Sales Assistant&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;46&lt;/td&gt;
                      &lt;td&gt;2011/12/06&lt;/td&gt;
                      &lt;td&gt;$145,600&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Hermione Butler&lt;/td&gt;
                      &lt;td&gt;Regional Director&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;47&lt;/td&gt;
                      &lt;td&gt;2011/03/21&lt;/td&gt;
                      &lt;td&gt;$356,250&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Lael Greer&lt;/td&gt;
                      &lt;td&gt;Systems Administrator&lt;/td&gt;
                      &lt;td&gt;London&lt;/td&gt;
                      &lt;td&gt;21&lt;/td&gt;
                      &lt;td&gt;2009/02/27&lt;/td&gt;
                      &lt;td&gt;$103,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Jonas Alexander&lt;/td&gt;
                      &lt;td&gt;Developer&lt;/td&gt;
                      &lt;td&gt;San Francisco&lt;/td&gt;
                      &lt;td&gt;30&lt;/td&gt;
                      &lt;td&gt;2010/07/14&lt;/td&gt;
                      &lt;td&gt;$86,500&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Shad Decker&lt;/td&gt;
                      &lt;td&gt;Regional Director&lt;/td&gt;
                      &lt;td&gt;Edinburgh&lt;/td&gt;
                      &lt;td&gt;51&lt;/td&gt;
                      &lt;td&gt;2008/11/13&lt;/td&gt;
                      &lt;td&gt;$183,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Michael Bruce&lt;/td&gt;
                      &lt;td&gt;Javascript Developer&lt;/td&gt;
                      &lt;td&gt;Singapore&lt;/td&gt;
                      &lt;td&gt;29&lt;/td&gt;
                      &lt;td&gt;2011/06/27&lt;/td&gt;
                      &lt;td&gt;$183,000&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Donna Snider&lt;/td&gt;
                      &lt;td&gt;Customer Support&lt;/td&gt;
                      &lt;td&gt;New York&lt;/td&gt;
                      &lt;td&gt;27&lt;/td&gt;
                      &lt;td&gt;2011/01/25&lt;/td&gt;
                      &lt;td&gt;$112,000&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>/* Styles for the drop-down. Feel free to change the styles to suit your website. :-) */
  
  .wrapper {
    border: 1px solid #ddd;
    width: 100%;
    height: 1000px;
    overflow-y: auto;
  }
  
  table{
    border-collapse: collapse;
  }
  
  .dataTables_length{
    margin: 15px;
  }
  
  .dataTables_filter{
    margin: 15px;
  }
  
  .dataTables_filter input{
    width: 350px;
    margin-left: 5px;
  }
  
  th:hover{
    color:rgb(255, 0, 0);
    cursor: pointer;
  }
  
  .cb-dropdown-wrap {
      max-height: 180px; /* At most, around 3/4 visible items. */
      position: relative;
      height: 40px;
      margin: 15px;
      color: black;
    }
    
    .cb-dropdown,
    .cb-dropdown li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .cb-dropdown {
      position: absolute;
      z-index: 1;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #fff;
      border: 1px solid #888;
      font-size: 20px;
    }
  
    /* For selected filter. */
    .active .cb-dropdown {
      background: rgb(255, 244, 92);
    }
    
    .cb-dropdown-wrap:hover .cb-dropdown {
      height: 250px;
      overflow: auto;
      transition: 0.2s height ease-in-out;
      background: #fff;
    }
    
    /* For selected items. */
    .cb-dropdown li.active {
      background: #ff0;
    }
    
    .cb-dropdown li label {
      display: block;
      position: relative;
      cursor: pointer;
      line-height: 19px; /* Match height of .cb-dropdown-wrap */
    }
    
    .cb-dropdown li label &gt; input {
      position: absolute;
      right: 0;
      top: 0;
      width: 16px;
    }
    
    .cb-dropdown li label &gt; span {
      display: block;
      margin-left: 3px;
      margin-right: 20px; /* At least, width of the checkbox. */
      font-family: sans-serif;
      font-size: 0.8em;
      font-weight: normal;
      text-align: left;
    }
    
    /* This fixes the vertical aligning of the sorting icon. */
    table.dataTable thead .sorting,
    table.dataTable thead .sorting_asc,
    table.dataTable thead .sorting_desc,
    table.dataTable thead .sorting_asc_disabled,
    table.dataTable thead .sorting_desc_disabled {
      background-position: 100% 10px;
    }
  
    .paginate_button{
      margin: 7px;
      font-size: 20px;
    }
  
    .paginate_button:hover{
      cursor: default;
    }
  
    thead{
      position: sticky;
      top: 0; /* Don't forget this, required for the stickiness */
    }
  
    .dataTables_length label{
      position: relative;
      left: 500px;
      top: 45px;
    }
  </code></pre>
  <p>JAVASCRIPT</p>
  <pre><code>// This code has been beautified via http://jsbeautifier.org/ with 2 spaces indentation.
  $(document).ready(function() {
      function cbDropdown(column) {
        return $('&lt;ul&gt;', {
          'class': 'cb-dropdown'
        }).appendTo($('&lt;div&gt;', {
          'class': 'cb-dropdown-wrap'
        }).appendTo(column));
      }
    
      $('#example').DataTable({
  
        lengthMenu: [[25, 50, 100, -1], [25, 50, 100, &quot;All&quot;]],
        &quot;sDom&quot;: '&lt;&quot;row view-filter&quot;&lt;&quot;col-sm-12&quot;&lt;&quot;pull-left&quot;l&gt;&lt;&quot;pull-right&quot;f&gt;&lt;&quot;clearfix&quot;&gt;&gt;&gt;t&lt;&quot;row view-pager&quot;&lt;&quot;col-sm-12&quot;&lt;&quot;text-center&quot;ip&gt;&gt;&gt;',
  
        initComplete: function() {
          this.api().columns().every(function() {
            var column = this;
            var ddmenu = cbDropdown($(column.header()))
              .on('change', ':checkbox', function() {
                var active;
                var vals = $(':checked', ddmenu).map(function(index, element) {
                  active = true;
                  return $.fn.dataTable.util.escapeRegex($(element).val());
                }).toArray().join('|');
    
                column
                  .search(vals.length &gt; 0 ? '^(' + vals + ')$' : '', true, false)
                  .draw();
    
                // Highlight the current item if selected.
                if (this.checked) {
                  $(this).closest('li').addClass('active');
                } else {
                  $(this).closest('li').removeClass('active');
                }
    
                // Highlight the current filter if selected.
                var active2 = ddmenu.parent().is('.active');
                if (active &amp;&amp; !active2) {
                  ddmenu.parent().addClass('active');
                } else if (!active &amp;&amp; active2) {
                  ddmenu.parent().removeClass('active');
                }
              });
    
            column.data().unique().sort().each(function(d, j) {
              var // wrapped
                $label = $('&lt;label&gt;'),
                $text = $('&lt;span&gt;', {
                  text: d
                }),
                $cb = $('&lt;input&gt;', {
                  type: 'checkbox',
                  value: d
                });
    
              $text.appendTo($label);
              $cb.appendTo($label);
    
              ddmenu.append($('&lt;li&gt;').append($label));
            });
          });
        }
      });
    });
  </code></pre>