1

我需要在表中编写多列搜索。由于某种原因（支持问题），我无法使用数据表和表排序器插件。我需要您在算法部分的帮助，我该如何进行多列搜索。请不要给我已经创建的插件的链接，因为我已经改变了太多的表结构并且我无法使用这些。我需要这样的东西

datatables.net/examples/api/multi_filter.html

如果我能得到关于它的算法如何工作的提示，我会为我编写相同的函数。我已经编写了这段代码，但它正在处理单列搜索，当我在另一列中搜索时，它会重置多列中的搜索。

function searchonKeyPress(input_text_box)
{

  var query =   $.trim(input_text_box.val());
  query = query.replace(/ /gi, '|');
  if(query=='undefined')
  return false;
  var index_input = input_text_box.closest("th").index();
  index = $("#freeze-tableFreeze .GridviewScrollItem tr:eq("+index_input+") td").length;    
  $("#freeze-tableFreeze .GridviewScrollItem").each(function() {
  var tr_ident = $(this).attr('tr_ident');  
  var column_text = $(".GridviewScrollItem[tr_ident='"+tr_ident+"'] td:eq("+index_input+")").text();
  (column_text.search(new RegExp(query, "i")) < 0) ?        $(this).hide().removeClass('visible') : $(this).show().addClass('visible');

  });
  pagignation(1);
}

我需要这样的东西：

在此处输入图像描述

4

3 回答 3

1

如果要在所有表中搜索，请尝试此操作：DEMO

如果你想按列搜索试试这个：DEMO

HTML：

<table>
    <thead>
        <tr>
            <th>One<input type='text' class='search' /></th>
            <th>Two<input type='text' class='search' /></th>
            <th>Three<input type='text' class='search' /></th>
            <th>Four<input type='text' class='search' /></th>
        </tr>
    </thead>
    .........

查询：

$('.search').blur(function(){
$("td").removeClass('selected','');
var index=$(this).index('.search')+1;

    $('.search').each(function(index , val){

        var tag=$(val).val();
       if(tag!='') $("tr td:contains("+tag+")").addClass('selected');

    });

});
于 2013-09-24T12:04:51.913 回答
1

这里最简单的解决方案是选择表中的所有 td 并使用带有搜索短语的 jQuery :contains()选择器过滤它们并突出显示行/列。

看看这个简单的例子。这将选择所有带有关键字“one”的单元格。

$('td:contains(one)').css('color', 'red');

更新 ：

带有搜索框代码的新示例。

于 2013-09-24T11:43:57.243 回答
0

对于过滤，您可以使用 JQuery 并手动遍历 html 标记以显示/隐藏取决于过滤条件的某些行...

我建立了一个如何实现这一目标的小例子。因为您没有提供任何代码，所以您必须采用它

http://jsfiddle.net/Elak/FxBhQ/

JQuery 部分并不过分复杂，因为你必须将它扩展到你想要的任何功能......

$(document).ready(function () {
    $(".searchBox").change(function () {
        var search = $(this).val();
        $(".column").each(function () {

            if ($(this).text().indexOf(search)) {
                $(this).parent().hide();
            }
        });
    });
});
于 2013-09-24T11:59:25.760 回答