更改数据表搜索功能

Question

我正在使用 jQuery DataTables 1.10.9 并尝试更改 jQuery DataTables 中的搜索功能，使其在开始搜索之前至少需要 3 个字符。所以我读到你需要像这样解除当前数据表搜索框的绑定：

$(".dataTables_filter input").unbind().bind("keyup", function(){
    alert("whoo");
});

所以现在它应该在我在搜索框中输入任何内容时提醒whoo，但它只是执行正常的搜索功能。所以我的猜测是它没有得到正确的字段。我也试过：

$('.input[type="search"]').unbind().bind("keyup", function(){
    alert("whoo");
});

但这也无济于事。

var dt = $('#example').DataTable({
   "order": [[11, "desc"]],
   "processing": true,
   "serverSide": true,
   "ajax": "/datatables/test" + id,
   "language": {
      "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Dutch.json"
   }
});

编辑

我确实尝试过jQuery DataTables: Delay search until 3 characters been typed OR a button clicked的代码

但由于我没有得到那个工作，我发布了这个问题。

我猜测它不起作用是它找不到输入表单，但我不明白为什么，所以我也在这里发布我的 html。

<input type="hidden" id="q" name="q" value="<?php echo $_GET['q']; ?>"/>
<table id="example" class="table table-hover" cellspacing="0" width="100%">
    <?php if($_GET['k_id'] != ""){?>
        <input type = "hidden" value = "<?php echo $_GET['k_id']; ?>" id = "k_id" />
    <?php }elseif($_GET['w_id'] != ""){ ?>
        <input type="hidden" value="<?php echo $_GET['w_id'];  ?>" id="w_id"/>
    <?php } ?>
    <thead>

此页面是关于查找当前在数据库中的所有产品。有 3 个输入字段，因此当用户查看某人的个人资料并想查看他们有哪些待售产品时，它将填充一个变量并将其发送到数据表函数，就像这样。 （这也解释了为什么 +id 在 ajax url 后面）

if($('#k_id').val() > 0) {
            var id = "?k_id=" + $('#k_id').val();
        }else if($('#w_id').val()){
            var id = "?w_id=" + $('#w_id').val();
        }else{
            var id = "";
        }

输入表单位于 id=example_filter 和 class= dataTables_filter 的 div 内（我会上传一张图片，但我还没有 10 个代表 xd）。

Answer 1

解决方案

当用户在搜索框中输入内容时，使用下面的代码禁用默认处理程序并附加您自己的事件处理程序。

$('.dataTables_filter input', dt.table().container())
    .off('.DT')
    .on('keyup.DT cut.DT paste.DT input.DT search.DT', function (e) {
       // If the length is 3 or more characters, or the user pressed ENTER, search
       if(this.value.length >= 3 || e.keyCode == 13) {
          // Call the API search function
          dt.search(this.value).draw();
       }

       // Ensure we clear the search if they backspace far enough
       if(this.value === "") {
          dt.search("").draw();
       }
    });

链接

• jQuery DataTables: Delay search until 3 characters been typed OR a button clicked

Answer 2

好的，我知道我的问题是什么了..

jquery 在 $('.dataTables_filter input') 实际存在之前一直在寻找它。答案是在它周围放一个 window.load

$(window).load(function(){
            var iets = $('.dataTables_filter input');
            iets.unbind().bind("keyup", function (e) {
                if(iets.val().length >= 3) {
                    dt.search(iets.val()).draw();
                }
                if(iets.val() === ""){
                    dt.search(iets.val()).draw();
                }
            });
        });

Answer 3

应该这样做，如果输入长度是 3 个或更多字符，它会搜索您的输入 val，否则它会保留所有结果。 working jsfiddle

$('.dataTables_filter input').unbind().bind("input", function (e) {

    if ($(this).val().length < 3)
        dt.fnFilter("");
    else
        dt.fnFilter($(this).val());
});