Question

我目前有一些自定义过滤器按钮，这些按钮使用数据库的搜索API函数。

HTML

  <ul>
                    <li class="btn"><a href="#" data-type="all">All</a></li>
                    <li class="btn"><a href="#" data-type="video">Video</a></li>
                    <li class="btn"><a href="#" data-type="image">Image</a></li>
                    <li class="btn"><a href="#" data-type="upload">Upload Dash</a></li>
                    <li class="btn"><a href="#" data-type="link">Code Link</a></li>
                  </ul>

jQuery

 var table = $('#rlist').dataTable( {
        "processing": true,
        "serverSide": true,
        "order": [[ 0, "asc" ]],
        "sDom": "<'row'<'col-sm-6'l><'col-sm-6'T <'clearfix'>f>r>t<'row'<'col-sm-5'i><'col-sm-7'p>>",
        "sPaginationType": "full_numbers",
        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
        "ajax": baseurl+"media/ajax_fetch"       

    });

    $('ul').on('click', 'a', function() {

          table
            .columns(1)
            .search($(this).text())
            .draw();
        });

        $('ul').on('click', 'a.all', function() {

          table
            .search('')
            .columns(1)
            .search('')
            .draw();
        });

问题是我不想使用搜索API，我想将按钮data-type属性发送到服务器端，在这里我可以手动操作而不干扰搜索功能。

我该怎么做？

Answer 1

我在当前项目中使用了类似的功能。基本上，您需要修改单击事件以获取元素的data-type属性，使用该数据调用ajax，然后清除表并添加新的搜索数据。

不过，每次通过这种方法进行搜索时，您都需要清除客户端表。

$('ul').on('click', 'a', function() {
  var elementType = $(this).attr("data-type");
  $.ajax({
    type: "POST",
    //assuming server url is something like '/someURL/{elementType}'
    url: urlToServer + elementType, 
    success: function(response) {
      if (response) {
        table.clear().rows.add(response).draw();
      }
      //no data back from server
      else table.clear();
    }
  });
});

数据表自定义过滤器未搜索

1 个答案: