数据表在标题搜索列上搜索完全匹配

Question

I am new to coding and at the risk of posting a duplicate question. I have seen a lot of these questions but I have not found one answer that helps me to implent want I need in the code below. I need the search function to match the exact math. So when the user gives in Anneke it should not show Janneke or when the user types in 4 it should only show 4 and not also 14, 24 etc. I am stuck in implenting a regex in to my code and I hope someone here knows how to do that in the code below.

$('#OBTable thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#OBTable thead');
            $('#OBTable thead tr:eq(1) th').text("");
                    
                    var table = $('#OBTable').dataTable({
                    
                     "ajax": {
                        "url": "SelectData.php",
                        "dataSrc": "data",
                    },
                     orderCellsTop: true,
                     select: true,
                       initComplete: function () {
                var api = this.api();
     
                // For each column
                api
                    .columns([0,6])
                    .eq(0)
                    .each(function (colIdx) {
                        // Set the header cell to contain the input element
                        var cell = $('.filters th').eq(
                            $(api.column(colIdx).header()).index()
                        );
                        var title = $(cell).text();
                        $(cell).html('<input type="search" class="form-control form-control-sm" placeholder="Filter.." />');
     
                        // On every keypress in this input
                        $(
                            'input',
                            $('.filters th').eq($(api.column(colIdx).header()).index())
                        )
                            .off('keyup change')
                            .on('keyup change', function (e) {
                                e.stopPropagation();
     
                                // Get the search value
                                $(this).attr('title', $(this).val());
                                var regexr = '({search})'; //$(this).parents('th').find('select').val();
    
                                var cursorPosition = this.selectionStart;
                                // Search the column for that value
                                api
                                    .column(colIdx)
                            
                                    .search(
                                        this.value != ''
                                            ? regexr.replace('{search}', '(((' + this.value + ')))')
                                            : '',
                                        this.value != '',
                                        this.value == ''
                                    )
                                    .draw();
     
                                $(this)
                                    .focus()[0]
                                    .setSelectionRange(cursorPosition, cursorPosition);
                            });
                    });
            },

Answer 1

There are different ways to implement an exact search. The following approach uses your example as the starting point - but with the following changes:

1. Added the following line to clear out the titles from the second header:

$('#example thead tr:eq(1) th').text("");

2. Replaced the following line:

var title = $(cell).text();

with this:

var title = $('#example thead tr:eq(0) th:eq(' + colIdx + ')').text();

This allows you to show some default text in the relevant data entry field (in this case that is the text from the heading cell).

Neither of these points are directly relevant to "exact searching" - but I added them anyway, since I think this is useful.

3. Commented out these lines, since they don't do anything useful here:

// Get the search value
//$(this).attr('title', $(this).val());
//var regexr = '({search})';  //$(this).parents('th').find('select').val();

4. For the exact search I added some logic to ensure all data is displayed when the search term is empty. To do this I replace an empty string "" with the following regular expression .* - which means "any character" (the . dot) repeated any number of times (the * asterisk).

This means, for empty fields, instead of ending up with the following regular expression...

^$

...you actually end up with this:

^.*$

Which means "any content" from the beginning of the field ( ^ ) to the end of the field ( $ ).

Here is the code to do that:

var searchTerm = $(this).val();
if (searchTerm.trim() === "") {
  searchTerm = ".*";
}
console.log( searchTerm ); // just for testing purposes
api
  .column(colIdx)
  .search("^" + searchTerm + "$", true, false, true)
  .draw();

Here is a demo you can run:

 $(document).ready(function() { $('#example thead tr') .clone(true) .addClass('filters') .appendTo('#example thead'); $('#example thead tr:eq(1) th').text(""); var table = $('#example').DataTable({ orderCellsTop: true, initComplete: function() { var api = this.api(); // For each column api .columns([0, 2]) .eq(0) .each(function(colIdx) { // Set the header cell to contain the input element var cell = $('.filters th').eq( $(api.column(colIdx).header()).index() ); var title = $('#example thead tr:eq(0) th:eq(' + colIdx + ')').text(); $(cell).html('<input type="text" placeholder="Enter ' + title + '" />'); // On every keypress in this input $( 'input', $('.filters th').eq($(api.column(colIdx).header()).index()) ) .off('keyup change') .on('keyup change', function(e) { e.stopPropagation(); // Get the search value //$(this).attr('title', $(this).val()); //var regexr = '({search})'; //$(this).parents('th').find('select').val(); var cursorPosition = this.selectionStart; // Search the column for that value var searchTerm = $(this).val(); if (searchTerm.trim() === "") { searchTerm = ".*"; } console.log( searchTerm ); api .column(colIdx) .search("^" + searchTerm + "$", true, false, true) .draw(); $(this) .focus()[0] .setSelectionRange(cursorPosition, cursorPosition); }); }); }, }); });

 <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /> <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script> <meta charset=utf-8 /> <title>Exact column search</title> <style> body { font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif; margin: 0; padding: 0; color: #333; background-color: #fff; } </style> </head> <body> <div class="container"> <table id="example" class="display nowrap" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$3,120</td> </tr> <tr> <td>Garrett Winters</td> <td>Director</td> <td>Edinburgh</td> <td>63</td> <td>2011/07/25</td> <td>$5,300</td> </tr> <tr> <td>Anneke</td> <td>Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$4,800</td> </tr> <tr> <td>Janneke</td> <td>Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$3,600</td> </tr> <tr> <td>Jenna Elliott</td> <td>Financial Controller</td> <td>Edinburgh</td> <td>33</td> <td>2008/11/28</td> <td>$5,300</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$4,525</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$4,080</td> </tr> <tr> <td>Rhona Davidson</td> <td>Integration Specialist</td> <td>Edinburgh</td> <td>55</td> <td>2010/10/14</td> <td>$6,730</td> </tr> <tr> <td>Colleen Hurst</td> <td>Javascript Developer</td> <td>San Francisco</td> <td>39</td> <td>2009/09/15</td> <td>$5,000</td> </tr> <tr> <td>Sonya Frost</td> <td>Software Engineer</td> <td>Edinburgh</td> <td>23</td> <td>2008/12/13</td> <td>$3,600</td> </tr> <tr> <td>Jena Gaines</td> <td>System Architect</td> <td>London</td> <td>30</td> <td>2008/12/19</td> <td>$5,000</td> </tr> <tr> <td>Quinn Flynn</td> <td>Financial Controller</td> <td>Edinburgh</td> <td>22</td> <td>2013/03/03</td> <td>$4,200</td> </tr> <tr> <td>Charde Marshall</td> <td>Regional Director</td> <td>San Francisco</td> <td>36</td> <td>2008/10/16</td> <td>$5,300</td> </tr> <tr> <td>Haley Kennedy</td> <td>Senior Marketing Designer</td> <td>London</td> <td>43</td> <td>2012/12/18</td> <td>$4,800</td> </tr> <tr> <td>Tatyana Fitzpatrick</td> <td>Regional Director</td> <td>London</td> <td>19</td> <td>2010/03/17</td> <td>$2,875</td> </tr> <tr> <td>Michael Silva</td> <td>Senior Marketing Designer</td> <td>London</td> <td>66</td> <td>2012/11/27</td> <td>$3,750</td> </tr> <tr> <td>Paul Byrd</td> <td>Javascript Developer</td> <td>New York</td> <td>64</td> <td>2010/06/09</td> <td>$5,000</td> </tr> <tr> <td>Gloria Little</td> <td>Systems Administrator</td> <td>New York</td> <td>59</td> <td>2009/04/10</td> <td>$3,120</td> </tr> <tr> <td>Bradley Greer</td> <td>Software Engineer</td> <td>London</td> <td>41</td> <td>2012/10/13</td> <td>$3,120</td> </tr> <tr> <td>Dai Rios</td> <td>System Architect</td> <td>Edinburgh</td> <td>35</td> <td>2012/09/26</td> <td>$4,200</td> </tr> <tr> <td>Jenette Caldwell</td> <td>Financial Controller</td> <td>New York</td> <td>30</td> <td>2011/09/03</td> <td>$4,965</td> </tr> <tr> <td>Yuri Berry</td> <td>System Architect</td> <td>New York</td> <td>40</td> <td>2009/06/25</td> <td>$3,600</td> </tr> <tr> <td>Caesar Vance</td> <td>Technical Author</td> <td>New York</td> <td>21</td> <td>2011/12/12</td> <td>$4,965</td> </tr> <tr> <td>Doris Wilder</td> <td>Sales Assistant</td> <td>Edinburgh</td> <td>23</td> <td>2010/09/20</td> <td>$4,965</td> </tr> <tr> <td>Angelica Ramos</td> <td>System Architect</td> <td>London</td> <td>36</td> <td>2009/10/09</td> <td>$2,875</td> </tr> <tr> <td>Gavin Joyce</td> <td>Developer</td> <td>Edinburgh</td> <td>42</td> <td>2010/12/22</td> <td>$4,525</td> </tr> <tr> <td>Jennifer Chang</td> <td>Regional Director</td> <td>London</td> <td>28</td> <td>2010/11/14</td> <td>$4,080</td> </tr> <tr> <td>Brenden Wagner</td> <td>Software Engineer</td> <td>San Francisco</td> <td>18</td> <td>2011/06/07</td> <td>$3,750</td> </tr> <tr> <td>Ebony Grimes</td> <td>Software Engineer</td> <td>San Francisco</td> <td>48</td> <td>2010/03/11</td> <td>$2,875</td> </tr> <tr> <td>Russell Chavez</td> <td>Director</td> <td>Edinburgh</td> <td>20</td> <td>2011/08/14</td> <td>$3,600</td> </tr> <tr> <td>Michelle House</td> <td>Integration Specialist</td> <td>Edinburgh</td> <td>37</td> <td>2011/06/02</td> <td>$3,750</td> </tr> <tr> <td>Suki Burks</td> <td>Developer</td> <td>London</td> <td>53</td> <td>2009/10/22</td> <td>$2,875</td> </tr> <tr> <td>Prescott Bartlett</td> <td>Technical Author</td> <td>London</td> <td>27</td> <td>2011/05/07</td> <td>$6,730</td> </tr> <tr> <td>Gavin Cortez</td> <td>Technical Author</td> <td>San Francisco</td> <td>22</td> <td>2008/10/26</td> <td>$6,730</td> </tr> <tr> <td>Martena Mccray</td> <td>Integration Specialist</td> <td>Edinburgh</td> <td>46</td> <td>2011/03/09</td> <td>$4,080</td> </tr> <tr> <td>Unity Butler</td> <td>Senior Marketing Designer</td> <td>San Francisco</td> <td>47</td> <td>2009/12/09</td> <td>$3,750</td> </tr> <tr> <td>Howard Hatfield</td> <td>Financial Controller</td> <td>San Francisco</td> <td>51</td> <td>2008/12/16</td> <td>$4,080</td> </tr> <tr> <td>Hope Fuentes</td> <td>Financial Controller</td> <td>San Francisco</td> <td>41</td> <td>2010/02/12</td> <td>$4,200</td> </tr> <tr> <td>Vivian Harrell</td> <td>System Architect</td> <td>San Francisco</td> <td>62</td> <td>2009/02/14</td> <td>$4,965</td> </tr> <tr> <td>Timothy Mooney</td> <td>Financial Controller</td> <td>London</td> <td>37</td> <td>2008/12/11</td> <td>$4,200</td> </tr> <tr> <td>Jackson Bradshaw</td> <td>Director</td> <td>New York</td> <td>65</td> <td>2008/09/26</td> <td>$5,000</td> </tr> <tr> <td>Miriam Weiss</td> <td>Support Engineer</td> <td>Edinburgh</td> <td>64</td> <td>2011/02/03</td> <td>$4,965</td> </tr> <tr> <td>Bruno Nash</td> <td>Software Engineer</td> <td>London</td> <td>38</td> <td>2011/05/03</td> <td>$4,200</td> </tr> <tr> <td>Odessa Jackson</td> <td>Support Engineer</td> <td>Edinburgh</td> <td>37</td> <td>2009/08/19</td> <td>$3,600</td> </tr> <tr> <td>Thor Walton</td> <td>Developer</td> <td>New York</td> <td>61</td> <td>2013/08/11</td> <td>$3,600</td> </tr> <tr> <td>Finn Camacho</td> <td>Support Engineer</td> <td>San Francisco</td> <td>47</td> <td>2009/07/07</td> <td>$4,800</td> </tr> <tr> <td>Elton Baldwin</td> <td>Data Coordinator</td> <td>Edinburgh</td> <td>64</td> <td>2012/04/09</td> <td>$6,730</td> </tr> <tr> <td>Zenaida Frank</td> <td>Software Engineer</td> <td>New York</td> <td>63</td> <td>2010/01/04</td> <td>$4,800</td> </tr> <tr> <td>Zorita Serrano</td> <td>Software Engineer</td> <td>San Francisco</td> <td>56</td> <td>2012/06/01</td> <td>$5,300</td> </tr> <tr> <td>Jennifer Acosta</td> <td>Javascript Developer</td> <td>Edinburgh</td> <td>43</td> <td>2013/02/01</td> <td>$2,875</td> </tr> <tr> <td>Cara Stevens</td> <td>Sales Assistant</td> <td>New York</td> <td>46</td> <td>2011/12/06</td> <td>$4,800</td> </tr> <tr> <td>Hermione Butler</td> <td>Director</td> <td>London</td> <td>47</td> <td>2011/03/21</td> <td>$4,080</td> </tr> <tr> <td>Lael Greer</td> <td>Systems Administrator</td> <td>London</td> <td>21</td> <td>2009/02/27</td> <td>$3,120</td> </tr> <tr> <td>Jonas Alexander</td> <td>Developer</td> <td>San Francisco</td> <td>30</td> <td>2010/07/14</td> <td>$5,300</td> </tr> <tr> <td>Shad Decker</td> <td>Regional Director</td> <td>Edinburgh</td> <td>51</td> <td>2008/11/13</td> <td>$5,300</td> </tr> <tr> <td>Michael Bruce</td> <td>Javascript Developer</td> <td>Edinburgh</td> <td>29</td> <td>2011/06/27</td> <td>$4,080</td> </tr> <tr> <td>Donna Snider</td> <td>System Architect</td> <td>New York</td> <td>27</td> <td>2011/01/25</td> <td>$3,120</td> </tr> </tbody> </table> </div> </body> </html>

---

Update

The follow-up question is:

Is it also posible that in this example only the column0 and 2 uses exact search and the column 1 and 4 for example use regular search?

You already have the various pieces you need to handle this, but here are some notes:

1. Change the columns list to include the extra columns you want to search:

.columns([0, 1, 2, 4])

2. Use an if statement (or similar logic) to execute the "exact" search if the column index is 0 or 2 - but execute the "standard" search otherwise.

Here is that logic:

// Search the column for that value
var searchTerm = $(this).val();
 
if ( colIdx === 0 || colIdx === 2 ) {
  // we are doing an "exact" search:
  if (searchTerm.trim() === "") {
    searchTerm = ".*";
  }
  api
    .column(colIdx)
    .search("^" + searchTerm + "$", true, false, true)
    .draw();
} else {
  // we are doing a standard search:
  api
    .column(colIdx)
    .search(searchTerm, false, true, true)
    .draw();
}

You can read more about the various search() parameters here .