使用复杂DOM结构在Input/Select中搜索JQuery DataTables

ghg1uchk  于 2024-01-07  发布在  jQuery
关注(0)|答案(2)|浏览(167)

下面的两个线程处理的问题与我的类似,但它们没有解决我的问题,因为它们太简单了,
JQuery Datatables search within input and select
Search within input tag with Datatables
我有一个数据表,由输入字段,文本/选择输入组成。

  1. $.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
  2. return $(value).val(); //will search in value attibute of element
  3. };

字符串
然后将

  1. var table = $("#example").DataTable({
  2. columnDefs: [{ "type": "html-input", "targets": [2, 3, 4] }]
  3. });


但这是假设我有一个简单的DOM结构,其中字段直接位于TD标记下。
https://jsfiddle.net/dL52ecjs/3/
我做了一个Fork from the Fiddle,在那里我改变了DOM如下:

*Name:在<DIV>中换行,并在同一单元格中添加第二个Input,Search应适用于两者。
*年龄:包裹在<DIV>

新提琴:https://jsfiddle.net/9vL1yukp/1/
不再起作用。我的列可以单独拥有不同的层或附加控件。
实际上,当我只添加一个<DIV> Package 器时,它就收支平衡了,所以即使是很小的修改(没有任何新控件)也不起作用。

jqjz2hbq

jqjz2hbq1#

尝试获取**“总值”**

  1. $.fn.dataTableExt.ofnSearch['html-input'] = function(el) {
  2. var inputs = $(el).find('input[value]');
  3. var all_values = "";
  4. inputs.each( function( i, e) {
  5. all_values += $(e).val();
  6. } );
  7. return all_values;
  8. };
  9. var table = $("#example").DataTable({
  10. columnDefs: [
  11. { "type": "html-input", "targets": [0, 3] }
  12. ]
  13. });

字符串
fiddle

更新

您可以将其扩展为选择或任何您喜欢的
fiddle for selects aswell
如果你想添加另一种类型的值,你想检查,只需选择元素,并添加属性,你想检查到all_values

  1. all_values <-- (existing filled with input values for example)
  2. // Search in image titles
  3. var elements = $(el).find('img[title]');
  4. elements.each( function( i, e) {
  5. all_values += $(e).attr('title');
  6. } );
  7. // Search in Link hrefs
  8. var elements = $(el).find('a[href]');
  9. elements.each( function( i, e) {
  10. all_values += $(e).attr('href');
  11. } );
  12. // etc ...

展开查看全部
jm2pwxwz

jm2pwxwz2#

基于Pilan的答案(JQuery DataTables在具有复杂DOM结构的输入/选择中搜索),但进行了一些额外的调整,并进行了重构以允许搜索和排序,这是最终的答案。
策略:首先定义一个实用函数,返回一个给定TD小区的“代表性字符串”。然后,在搜索和排序中使用它,以支持这两种操作。

  1. // Define the custom utility function that brings back a "Representative String" for a TD for DataTables' Search & Sort
  2. function getRepresentativeStringForTDContent(el) {
  3. // Will store concenatenated string for this TD cell
  4. var all_search_values = "";
  5. // NOTE: "el" is the content of TD, which could be either
  6. // (1) input field(s) themselves -- one or multiple, or
  7. // (2) wrapping element(s) in which we need to find() -- one or multiple
  8. $(el).each(function (index) {
  9. var inputsInput = $(this).is('input') ? $(this) : $(this).find('input');
  10. var inputsSelect = $(this).is('select') ? $(this) : $(this).find('select');
  11. inputsInput.each( function( i, e) {
  12. // Text Inputs added by value
  13. all_search_values += $(e).val();
  14. });
  15. inputsSelect.each( function( i, e) {
  16. // Select Inputs added by Selected Option text (not value)
  17. all_search_values += $(e).find('option:selected').text();
  18. });
  19. });
  20. return all_search_values;
  21. }

字符串
现在,定制的DataTable Search(和Sort)将使用此Representative Value,如下所示:

1.搜索

  1. // Define the DataTable custom Search function for Input/Select fields
  2. $.fn.dataTableExt.ofnSearch['html-input'] = function(el) {
  3. return getRepresentativeStringForTDContent(el);
  4. };

2.排序

  1. // Define the DataTable custom Sort function for Input/Select fields
  2. $.fn.dataTable.ext.order['html-input'] = function ( settings, col )
  3. {
  4. return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
  5. return getRepresentativeStringForTDContent($(td).html());
  6. });
  7. };


将2个自定义的Search & Sort函数应用于DataTable:

  1. // DataTable creation
  2. var table = $("#exampleTable").DataTable({
  3. columnDefs: [
  4. { "type": "html-input", "targets": [3, 4, 5] }, // Search Logic
  5. { "orderDataType": "html-input", type: "string", "targets": [3, 4, 5] } // Sort Logic
  6. ]
  7. });

展开查看全部

相关问题