Question

DataTables在桌子的右上方显示一个搜索框，它很好并且工作正常。

但是我有一个需要在搜索框附近下拉的地方，用户将选择要搜索的字段。

例如，有FirstName，MiddleName和LastName列。用户不会在所有3列中进行搜索，而是在下拉列表中选择（例如“MiddleName”），搜索将仅在此字段中进行。

其他问题是，这个DataTables是从服务器端通过ajax填充的，下拉列表中的某些字段可以是“仅服务器”，即在DataTable上不可见。然后，在我的例子中，想象一下DataTable显示“FirstName”和“LastName”，但允许搜索“MiddleName”。在这种情况下，我的服务器端代码已经准备就绪，我的问题只是关于如何设置DataTables：

有一些插件/选项准备就绪吗？
要添加此下拉列表，我需要使用一些DataTables api创建和定位？
如何在请求到达服务器之前“拦截”搜索按钮单击，然后指定要搜索的正确列？

Answer 1

以下是您要求的第一部分。它将选择框添加到数据表中。然后它从选择框中取出选定的值，并在ajax调用触发时将其添加到过滤器。

演示于：http://live.datatables.net/zewiqiyo/1/edit

    $(document).ready(function () {
        var columns = [{ title: "Name" }, { title: "Position" }, { title: "Office" }, { title: "Age" }, { title: "Start_Date" }, { title: "Salary" }];

        // I use the preInt event to add the selectbox
        // the css has a float right for the select box so it ends up next to the filter.
        $("#example").one("preInit.dt", function () {
            $sel = $("<select></select>");
            $sel.html("<option value='-1'>Select Column</option>");
            $.each(columns, function (i, opt) {

                $sel.append("<option value='" + opt.title + "'>" + opt.title + "</option>");
            });
            $("#example_ddl").append($sel);

        });
        var table = $('#example').DataTable(
          {
              serverSide: true,
              columns: columns,
              // <"#example_ddl.filterddl"> added as a container for the selectbox
              dom: '<"#example_ddl.filterddl">fti',
              ajax: {
                  url: "examples/server_side/scripts/server_processing.php",
                  data: function (filter) {

                      // This is where you are intercepting what is being sent
                      // back to the server to add the column to search

                      var val = $("select", "#example_ddl").val();
                      filter.search.searchColumn = val;


                  }

              }
          }
        );
    });

下拉列表，用于选择要搜索的字段

1 个答案: