jQuery数据表搜索中的多记录搜索

时间:2018-07-16 11:05:13

标签: javascript jquery datatables

我是jquery数据表的新手,我想为多搜索类型的每一列添加搜索,即能够一次在同一搜索栏中搜索多个值。

例如。我想搜索与2个名称(老虎,阁楼)相对应的记录。 我尝试使用yadcf,但是在合并代码时遇到了问题。

我已经附上了脚本。

$('#create').ready(function() {
  var dataSet = {
    "data": [
      [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800"
      ],
      [
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750"
      ],
      [
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000"
      ],
      [
        "Cedric Kelly",
        "Senior Javascript Developer",
        "Edinburgh",
        "6224",
        "2012/03/29",
        "$433,060"
      ],
      [
        "Airi Satou",
        "Accountant",
        "Tokyo",
        "5407",
        "2008/11/28",
        "$162,700"
      ],

      [
        "Sonya Frost",
        "Software Engineer",
        "Edinburgh",
        "1667",
        "2008/12/13",
        "$103,600"
      ],
      [
        "Jena Gaines",
        "Office Manager",
        "London",
        "3814",
        "2008/12/19",
        "$90,560"
      ],
      [
        "Quinn Flynn",
        "Support Lead",
        "Edinburgh",
        "9497",
        "2013/03/03",
        "$342,000"
      ],
      [
        "Charde Marshall",
        "Regional Director",
        "San Francisco",
        "6741",
        "2008/10/16",
        "$470,600"
      ],
      [
        "Haley Kennedy",
        "Senior Marketing Designer",
        "London",
        "3597",
        "2012/12/18",
        "$313,500"
      ],
      [
        "Tatyana Fitzpatrick",
        "Regional Director",
        "London",
        "1965",
        "2010/03/17",
        "$385,750"
      ],
      [
        "Michael Silva",
        "Marketing Designer",
        "London",
        "1581",
        "2012/11/27",
        "$198,500"
      ],
      [
        "Paul Byrd",
        "Chief Financial Officer (CFO)",
        "New York",
        "3059",
        "2010/06/09",
        "$725,000"
      ],
      [
        "Gloria Little",
        "Systems Administrator",
        "New York",
        "1721",
        "2009/04/10",
        "$237,500"
      ]
    ]
  }

  $("<table id='example' class='display' cellspacing='0' width='100%'>" +
    "<thead>" +
    "<tr>" +
    "<th>Name</th>" +
    "<th>Position</th>" +
    "<th>Office</th>" +
    "<th>Extn.</th>" +
    "<th>Start Date</th>" +
    "<th>Slary</th>" +
    "</tr>" +
    "</thead>" +
    "<tbody>" +
    "<tfoot>" +
    "<tr>" +
    "<th>Name</th>" +
    "<th>Position</th>" +
    "<th>Office</th>" +
    "<th>Extn.</th>" +
    "<th>Start Date</th>" +
    "<th>Slary</th>" +
    "</tr>").appendTo('#table-section');
  var x = JSON.stringify(dataSet);
  var data = jQuery.map(dataSet.data, function(el, i) {
    return [el];
  });
  var otable = $('#example').dataTable({
    data: data,
    columns: [
      {title: "Name"},
      {title: "Position"},
      {title: "Office"},
      {title: "Extn."},
      {title: "Start date"},
      {title: "Salary"}
    ],
  });

  $('#example tfoot th').each(function() {
    var title = $(this).text();
    // console.log(title);
    $(this).html('<input type="text" placeholder="Search ' + title + '" />');
  });

  otable.columns().every(function() {
    console.log("abhay");
    var that = this;
    $('input', this.footer()).on('keyup change', function() {
      if (that.search() !== this.value) {
        that
          .search(this.value)
          .draw();
      }
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="table-section"></div>

2 个答案:

答案 0 :(得分:0)

您可以将dataTables与yadcf一起使用。将列的filter_type更改为“ multi_select”。您需要像下面的代码段一样为每列设置过滤器类型。

脚本:

    var dataSet = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$320,800"
    ],
    [
        "Garrett Winters",
        "Accountant",
        "Tokyo",
        "8422",
        "2011/07/25",
        "$170,750"
    ],
    [
        "Ashton Cox",
        "Junior Technical Author",
        "San Francisco",
        "1562",
        "2009/01/12",
        "$86,000"
    ],
    [
        "Cedric Kelly",
        "Senior Javascript Developer",
        "Edinburgh",
        "6224",
        "2012/03/29",
        "$433,060"
    ],
    [
        "Airi Satou",
        "Accountant",
        "Tokyo",
        "5407",
        "2008/11/28",
        "$162,700"
    ],

    [
        "Sonya Frost",
        "Software Engineer",
        "Edinburgh",
        "1667",
        "2008/12/13",
        "$103,600"
    ],
    [
        "Jena Gaines",
        "Office Manager",
        "London",
        "3814",
        "2008/12/19",
        "$90,560"
    ],
    [
        "Quinn Flynn",
        "Support Lead",
        "Edinburgh",
        "9497",
        "2013/03/03",
        "$342,000"
    ],
    [
        "Charde Marshall",
        "Regional Director",
        "San Francisco",
        "6741",
        "2008/10/16",
        "$470,600"
    ],
    [
        "Haley Kennedy",
        "Senior Marketing Designer",
        "London",
        "3597",
        "2012/12/18",
        "$313,500"
    ],
    [
        "Tatyana Fitzpatrick",
        "Regional Director",
        "London",
        "1965",
        "2010/03/17",
        "$385,750"
    ],
    [
        "Michael Silva",
        "Marketing Designer",
        "London",
        "1581",
        "2012/11/27",
        "$198,500"
    ],
    [
        "Paul Byrd",
        "Chief Financial Officer (CFO)",
        "New York",
        "3059",
        "2010/06/09",
        "$725,000"
    ],
    [
        "Gloria Little",
        "Systems Administrator",
        "New York",
        "1721",
        "2009/04/10",
        "$237,500"
    ]
];

var table;

$(document).ready(function () {
    table = $('#myTable').DataTable({
        data: dataSet,
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    });

    yadcf.init(table, [
        {
            column_number: 0,
            filter_type: 'multi_select',
            filter_reset_button_text: false
        },
        {
            column_number: 1,
            filter_type: 'text',
            filter_reset_button_text: false
        },
        {
            column_number: 2,
            filter_type: 'text',
            filter_reset_button_text: false
        },
        {
            column_number: 3,
            filter_type: 'text',
            filter_reset_button_text: false
        },
        {
            column_number: 4,
            filter_type: 'text',
            filter_reset_button_text: false
        },
        {
            column_number: 5,
            filter_type: 'text',
            filter_reset_button_text: false
        }
    ]);
});

您的html应该是:

    <table id="myTable" class="display" style="width: 100%"></table>

对于multi_select,您可以使用selected,select2插件来改进multi_select。

答案 1 :(得分:0)

您可以在数据表中移动点击以对多列进行排序...

如果要匹配整个短语,则需要将搜索内容括在引号中。

https://datatables.net/examples/basic_init/multi_col_sort.html

https://datatables.net/reference/api/search()