javascript - Datatables tags search - Stack Overflow

admin管理员组

文章数量:1410717

I've been trying to get tags working with Jquery Datatables for about 1 week now with no luck! I've gone through stackoverflow and have not found the help i'm looking for.

This post here was insightful:

dataTables Column Filtering Plugin with Select Tags

I am using jquery.tag-editor to create the tags and using this code I can successfully create tags inside the global search box:

      $('div.dataTables_filter input').tagEditor();

my issue is that the tags are not filtering the Datatable as expected, I know that the table needs to be redrawn but from what I can see the tagEditor creates 3 div's inside a ul inside the searchbox:

    <li><div class="tag-editor-spacer"></div>
    <div class="tag-editor-tag">january</div>
    <div class="tag-editor-delete"><i></i></div></li>

with the middle div tag-editor-tag containing the string I want to use to filter the datatable. On change it should redraw the table using the value inside the tag-editor-tag div. I think this is close as I have seen to what I want it to do but have no idea how to ignore the divs and get the middle value.

    $('div.dataTables_filter input').change(function(){
    table.fnFilter($('.....').text()); 
    });

Any help is appreciated.

I've been trying to get tags working with Jquery Datatables for about 1 week now with no luck! I've gone through stackoverflow and have not found the help i'm looking for.

This post here was insightful:

dataTables Column Filtering Plugin with Select Tags

I am using jquery.tag-editor to create the tags and using this code I can successfully create tags inside the global search box:

      $('div.dataTables_filter input').tagEditor();

my issue is that the tags are not filtering the Datatable as expected, I know that the table needs to be redrawn but from what I can see the tagEditor creates 3 div's inside a ul inside the searchbox:

    <li><div class="tag-editor-spacer"></div>
    <div class="tag-editor-tag">january</div>
    <div class="tag-editor-delete"><i></i></div></li>

with the middle div tag-editor-tag containing the string I want to use to filter the datatable. On change it should redraw the table using the value inside the tag-editor-tag div. I think this is close as I have seen to what I want it to do but have no idea how to ignore the divs and get the middle value.

    $('div.dataTables_filter input').change(function(){
    table.fnFilter($('.....').text()); 
    });

Any help is appreciated.

• javascript
• jquery
• html
• css
• datatable

Share Improve this question Follow edited May 23, 2017 at 12:10 CommunityBot 111 silver badge asked May 22, 2017 at 6:59 EnochEnoch 1,03177 silver badges1616 bronze badges 1

• Doing some more reading I believe I can use inner.HTML somehow to parse the information in the div and exclude the <li> tags too. – Enoch Commented May 22, 2017 at 8:30

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

Do not add the tag-editor plugin to the default search input of DataTables. Simply create your own search field. This can easily be done by taking the following steps.

1. Take a look at the dom option of dataTables.

dom

Define the table control elements to appear on the page and in what order.

Using the dom option you can hide the default search input field adding a custom div element instead.

---

2. Take a look at the events being fired during the initialisation of dataTables.

init

Initialisation plete event - fired when DataTables has been fully initialised and data loaded.

preInit

Initialisation started event - triggered immediately before data load.

Use the preInit event to append a search input-field or textarea to the custom div element that was created using the dom option.

Use the init event to hook up the tag-editor plugin to the appended search input field.

---

3. Make use of the dataTables search API method to do the search, whenever the change event on the tag-editor search field has been triggered.

search()

Search for data in the table.

Here is an example using a static HTML table.

var $tagsLabel = $("<lable>")
var $tagsInput = $("<textarea>");

$table = $("#example")
  .on("preInit.dt", function( e, settings) {
  $tagsLabel.append($tagsInput)
  $('.dataTables_tags').append($tagsLabel)
})
  .on("init.dt", function( e, settings ) {
  $tagsInput.tagEditor({
    delimiter: ', ',
    placeholder: 'Enter tags ...',
    onChange: function(field, editor, tags) {
      if ( tags.length ) {
        if( tags.length > 1 ) {
          $table.search(tags.join('|'), true, false).draw();
        } else {
          $table.search( tags[0] ).draw();
        }
      }
      else {
        $table.search('').draw(true);
      }
    },
  });
})
  .DataTable({
  "dom": '<l<"dataTables_tags"><t>ip>'
});

.dataTables_wrapper .dataTables_tags {
    float: right;
    text-align: right;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.datatables/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/caret/1.0.0/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tag-editor/1.0.20/jquery.tag-editor.min.js"></script>

<table id="example" class="display" cellspacing="0" 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>$320,800</td></tr><tr> <td>Garrett Winters</td><td>Accountant</td><td>Tokyo</td><td>63</td><td>2011/07/25</td><td>$170,750</td></tr><tr> <td>Ashton Cox</td><td>Junior Technical Author</td><td>San Francisco</td><td>66</td><td>2009/01/12</td><td>$86,000</td></tr><tr> <td>Cedric Kelly</td><td>Senior Javascript Developer</td><td>Edinburgh</td><td>22</td><td>2012/03/29</td><td>$433,060</td></tr><tr> <td>Airi Satou</td><td>Accountant</td><td>Tokyo</td><td>33</td><td>2008/11/28</td><td>$162,700</td></tr><tr> <td>Brielle Williamson</td><td>Integration Specialist</td><td>New York</td><td>61</td><td>2012/12/02</td><td>$372,000</td></tr><tr> <td>Herrod Chandler</td><td>Sales Assistant</td><td>San Francisco</td><td>59</td><td>2012/08/06</td><td>$137,500</td></tr><tr> <td>Rhona Davidson</td><td>Integration Specialist</td><td>Tokyo</td><td>55</td><td>2010/10/14</td><td>$327,900</td></tr><tr> <td>Colleen Hurst</td><td>Javascript Developer</td><td>San Francisco</td><td>39</td><td>2009/09/15</td><td>$205,500</td></tr><tr> <td>Sonya Frost</td><td>Software Engineer</td><td>Edinburgh</td><td>23</td><td>2008/12/13</td><td>$103,600</td></tr><tr> <td>Jena Gaines</td><td>Office Manager</td><td>London</td><td>30</td><td>2008/12/19</td><td>$90,560</td></tr><tr> <td>Quinn Flynn</td><td>Support Lead</td><td>Edinburgh</td><td>22</td><td>2013/03/03</td><td>$342,000</td></tr><tr> <td>Charde Marshall</td><td>Regional Director</td><td>San Francisco</td><td>36</td><td>2008/10/16</td><td>$470,600</td></tr><tr> <td>Haley Kennedy</td><td>Senior Marketing Designer</td><td>London</td><td>43</td><td>2012/12/18</td><td>$313,500</td></tr><tr> <td>Tatyana Fitzpatrick</td><td>Regional Director</td><td>London</td><td>19</td><td>2010/03/17</td><td>$385,750</td></tr><tr> <td>Michael Silva</td><td>Marketing Designer</td><td>London</td><td>66</td><td>2012/11/27</td><td>$198,500</td></tr><tr> <td>Paul Byrd</td><td>Chief Financial Officer (CFO)</td><td>New York</td><td>64</td><td>2010/06/09</td><td>$725,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>$237,500</td></tr><tr> <td>Bradley Greer</td><td>Software Engineer</td><td>London</td><td>41</td><td>2012/10/13</td><td>$132,000</td></tr><tr> <td>Dai Rios</td><td>Personnel Lead</td><td>Edinburgh</td><td>35</td><td>2012/09/26</td><td>$217,500</td></tr><tr> <td>Jenette Caldwell</td><td>Development Lead</td><td>New York</td><td>30</td><td>2011/09/03</td><td>$345,000</td></tr><tr> <td>Yuri Berry</td><td>Chief Marketing Officer (CMO)</td><td>New York</td><td>40</td><td>2009/06/25</td><td>$675,000</td></tr><tr> <td>Caesar Vance</td><td>Pre-Sales Support</td><td>New York</td><td>21</td><td>2011/12/12</td><td>$106,450</td></tr><tr> <td>Doris Wilder</td><td>Sales Assistant</td><td>Sidney</td><td>23</td><td>2010/09/20</td><td>$85,600</td></tr><tr> <td>Angelica Ramos</td><td>Chief Executive Officer (CEO)</td><td>London</td><td>47</td><td>2009/10/09</td><td>$1,200,000</td></tr></tbody> </table>

本文标签： javascriptDatatables tags searchStack Overflow