数据表标签搜索 [英] Datatables tags search

问题描述

我一直在尝试让标签与Jquery Datatables一起使用大约1周，但是没有运气！ 我经历了stackoverflow，却没有找到我想要的帮助.

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.

这篇文章很有见地:

带有选择标签的dataTables列过滤插件

我正在使用jquery.tag-editor创建标签，并且使用此代码，我可以在全局搜索框中成功创建标签:

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();

我的问题是标签没有按预期过滤数据表，我知道表需要重绘，但是从我可以看到的是tagEditor在搜索框内的ul中创建了3个div:

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>

与中间的div tag-editor-tag包含我要用于过滤数据表的字符串.更改后，应使用tag-editor-tag div中的值重绘表. 我认为这已经接近我想要执行的操作，但是不知道如何忽略div并获得中间值.

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()); 
    });

感谢您的帮助.

推荐答案

请勿将标签编辑器插件添加到DataTables的默认搜索输入中. 只需创建您自己的搜索字段.只需执行以下步骤，即可轻松完成此操作.

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. 看看dataTables的dom选项.

dom

定义表控件元素以什么顺序出现在页面上.

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

使用dom选项，您可以隐藏默认搜索输入字段，而添加自定义div元素.

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

1. 看看dataTables初始化期间触发的事件.

初始化

初始化完成事件-当DataTables已完全初始化并加载数据时触发.

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

preInit

初始化已开始事件-在数据加载之前立即触发.

Initialisation started event - triggered immediately before data load.

使用preInit事件将搜索输​​入字段或文本区域附加到使用dom选项创建的自定义div元素上.

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

使用init事件将标签编辑器插件连接到附加的搜索输入字段.

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

1. 每当触发标签编辑器搜索字段中的change事件时，都使用dataTables search API方法进行搜索.

1. 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.

搜索()

在表格中搜索数据.

这是一个使用静态HTML表的示例.

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

这篇关于数据表标签搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！