加载数据后搜索数据表

Question

我在 Rails 4.2 项目中使用 DataTables 1.10。我在 js 资产文件中有以下内容：

var table = $('#ticket_details').DataTable({
stateSave: true,
deferRender: true,
ajax: $('#ticket_details').data('source'),
"columns": [ 
    { "data": "reference_number" },
    { "data": "location" },
    { "data": "title" },
    { "data": "ticket_category", className: "hidden-xs" },
    { "data": "opened_date" },
    { "data": "last_update", className: "hidden-sm hidden-xs"  },
    { "data": "time", className: "hidden-xs", "orderData": 7 },
    { "data": "decimal_time", "searchable": false, className: "hidden-lg hidden-md hidden-sm hidden-xs hidden"},
    { "data": "open_or_closed", className: "hidden-lg hidden-md hidden-sm hidden-xs hidden"},
    { "data": "assigned_to", className: "hidden-md hidden-sm hidden-xs" },
    { "data": "icons", className: "hidden-sm hidden-xs"  }]} );      

setInterval( function () {
table.ajax.reload( null, false ); }, 60000 );

我希望在我的隐藏列中搜索表格，该列显示票是打开还是关闭。我有两个按钮，后面有一些 JS 在打开和关闭之间切换，但我希望它默认打开票

$('#ticket_details').dataTable( {
   "initComplete": function(settings, json) {
    table.columns(8).search("Open").draw();
  }
} );

$('#open_toggle').on('click', function () {
      table.columns(8).search("Open").draw();
});

$('#closed_toggle').on('click', function () {
      table.columns(8).search("Closed").draw();
});

但是，当您加载页面时，表格会显示所有内容。当然，如果我使用 drawCallback() 然后重新绘制表格，它只会创建一个无限循环吗？

Answer 1

您可以使用search 选项link 进行初始搜索

有些喜欢：

var table = $('#ticket_details').DataTable({
    "search": {
        "search": "Fred"
    },
    stateSave: true,
    deferRender: true,
    ajax: $('#ticket_details').data('source'),
    "columns": [ 
        { "data": "reference_number" },
        { "data": "location" },
        { "data": "title" },
        { "data": "ticket_category", className: "hidden-xs" },
        { "data": "opened_date" },
        { "data": "last_update", className: "hidden-sm hidden-xs"  },
        { "data": "time", className: "hidden-xs", "orderData": 7 },
        { "data": "decimal_time", "searchable": false, className: "hidden-lg hidden-md hidden-sm hidden-xs hidden"},
        { "data": "open_or_closed", className: "hidden-lg hidden-md hidden-sm hidden-xs hidden"},
        { "data": "assigned_to", className: "hidden-md hidden-sm hidden-xs" },
        { "data": "icons", className: "hidden-sm hidden-xs"  }
    ]
});