JQuery Bootstrap DataTables:包含select和input元素的Filter列 [英] JQuery Bootstrap DataTables: Filter column containing select and input elements

问题描述

我有一个包含3列的Bootstrap DataTable:

I have a Bootstrap DataTable with 3 columns:

• 在"Id"列中，每个单元格都有一个带字符串的普通<label .../> html元素 内容
• 在名称"列中，每个单元格包含一个带有相应值的<input .../> html元素
• 在作业"列中，每个单元格都包含一个具有各自值的<select options .../> html元素

• In column "Id" each cell has a plain <label .../> html element with string content
• In column "Name" each cell contains an <input .../> html element with respective values
• In column "Job" each cell contains a <select options .../>html element with respective values

使用默认的Filter对象，我可以使用"Id"标签过滤整个DataTable. 但是，我无法使用名称"和工作"列中每个单元格的<select options .../>或<input .../>中的值来过滤DataTable.

Using the default Filter object, I can filter the entire DataTable using the "Id" labels. However, I cannot filter the DataTable using values from the <select options .../> or from the <input .../> of each cell from the "Name" and "Job" columns.

这是数据表的一部分.

您有什么建议或我可以关注的jquery代码示例吗?谢谢你.

Do you have any suggestions or jquery code samples I could follow? Thank you.

我没有在实现中使用serverSide选项.

I am not using serverSide option in the implementation.

这是数据表:

$('#tbl').DataTable({
    "iDisplayLength": 50,
    "order": [[ 0, "asc" ]],
    "columnDefs": [{
        "sortable": false,
        "searchable" : true,
        "render" : function(data, type, full) { return data;},
        "targets": [1, 2]
    }]
   });

推荐答案

Unfortunatley，根据

Unfortunatley, according to this link it can't be done with the default Filter (see the last post). You have to define your own filter.

这是一个示例:https://jsfiddle.net/Igorovics/m5vy656x/19/.它仅包含对输入字段的过滤，但可以扩展为轻松选择字段.

Here is an example for that: https://jsfiddle.net/Igorovics/m5vy656x/19/ . It only contains filtering for input fields, but can be extended to select fields easily.

1. 您必须在屏幕上放置一个新的输入字段，在示例中，这是自定义过滤器"，其id为filterField.我没有对此做任何CSS，但是如果您愿意，可以将其放在您的表中.

1. You have to put a new input field to the screen, in the example this is the 'Custom filter', with the id of filterField. I didn't do any css on that, but that can be placed into your table, if you want to.

您可以将keyup事件绑定到新的筛选器，该筛选器将重新绘制表格.

You can bind a keyup event to the new filter, which is redrawing your table.

要编写自己的过滤功能，必须扩展Datatable的$.fn.dataTable.ext.search功能.可以在此处找到一些信息，并且可以在此处.不幸的是，官方示例缺少您真正需要的数据.该函数有5个参数，您需要第四个参数(该行的原始数据源).在我的示例中，我将其称为original.第四个参数是JavaScript数组，可以在其中找到给定行的给定列的原始HTML代码.在我的示例中，我将数组的第5个元素读入valueToFilter变量，这是因为示例中给定行的第5个元素始终是包含input字段的列.我还将filterField字段的值读取到一个名为filterValue的变量.

To write your own filtering function, you have to extend the $.fn.dataTable.ext.search function of Datatable. Some informaton can be found here, and an official example can be found here. Unfortunately the official example misses the data you really need. The function has 5 parameters and you need the fourth parameter (the original data source for the row). In my example I call it original. This fourth parameter is a JavaScript array, where the original HTML code of the given columns of the given rows can be found. In my example I read the 5th element of the array into the valueToFilter variable, it is because the 5th element of the given row in the example is always the column, which contains the input field. I also read the value of filterField field to a variable, called filterValue.

最后一步是检查该字段是否包含过滤器值.如果是，则返回true，因此将在表中看到该行，否则返回false.

Last step is to check whether the field contains the filter value, or not. If yes, we return true, so the row will be seen in the table, otherwise we return false.

如您所见，我将原始过滤器留在了屏幕上.它们可以一起使用，但是很高兴知道原始过滤器总是首先起作用.因此，如果您在原始文件中写了一些东西，并过滤了行，那么您的自定义过滤器将只接收其余的行.如果您不再需要原始过滤器，则可以使用 dom 选项将其删除.

As you can see, I left the original filter on the screen. They can be used together, but it's good to know that the original filter always works first. So if you write something into the original, and that filters the rows, your custom filter will only receive the rest of the rows. If you don't need the original filter anymore, you can remove it with the dom option.

很抱歉，我的解释很长.

Sorry for the long explanation, I hope I was clear.

这篇关于JQuery Bootstrap DataTables:包含select和input元素的Filter列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！