刷新后jQuery数据表保留过滤器参数

时间:2016-05-04 14:17:40

标签: javascript jquery datatables

我正在使用数据表,根据我以前的一些问题。我能够在表格的顶部添加INPUT字段,在数据表中进行单独的列搜索。

我现在需要做的是在页面刷新后保留在INPUT字段(或多个字段)中输入的参数。

到目前为止,这是我的代码:

 // header input filters
 $('#example1 .filters th').each(function(){
   var title = $('#example1 thead th').eq($(this).index()).text();
   $(this).html('<input type="text" placeholder="Search '+title+'" />');
 });

 // set and print the datatable
 var $dataTable = $('#example1').DataTable({
   "ajax": 'api/dateset.php',
   "iDisplayLength": 25,
   "order": [[ 6, "desc" ]],
   "scrollY": 580,
   "scrollX": true,
   "bDestroy": true,
   "stateSave": true
 });

 // Apply the search to columns
 $dataTable.columns().eq(0).each(function(colIdx){
   $('input', $('.filters th')[colIdx]).on('keyup change', function(){
     $dataTable
       .column(colIdx)
       .search(this.value)
       .draw();
   });
 });

如果您在上面我设置$ dataTable的部分中注意到,您应该看到“stateSave”:true。使用它,当页面刷新时,它会保存用户输入的参数搜索,但不会在INPUT字段中显示文本。

这就是我被困住的地方。

这是一个直观的表示:

在刷新之前 -

enter image description here

刷新后 -

enter image description here

正如您在第二张图片中看到的那样,搜索适用于以TEST222开头的预订,但文本在BOOKING INPUT字段中不再可见。

我确实遇到过这篇文章:https://datatables.net/reference/option/stateSaveCallback

但我不确定如何将代码实现到我的代码中。我甚至不确定stateSaveCallback是否是正确使用的函数。

如果您在我的代码中看到错误,或者您知道如何将stateSaveCallback应用于我的代码,请告诉我如何使用它。

2 个答案:

答案 0 :(得分:5)

我终于找到了这篇文章:http://live.datatables.net/neqozaj/1/edit

利用该帖子,我能够将这段代码添加到整个功能中:

 var state = $dataTable.state.loaded();
 if ( state ) {
   $dataTable.columns().eq( 0 ).each( function ( colIdx ) {
   var colSearch = state.columns[colIdx].search;

   if ( colSearch.search ) {
     $('input', $('.filters th')[colIdx]).val( colSearch.search );
   }
  });
  $dataTable.draw();
 }

使用这个,我能够达到我想要的效果。

答案 1 :(得分:0)

如果您具有列级过滤器,请尝试以下代码。

 db.update(MemoEntry.TABLE_NAME, values, "_id=" + [row id should be here], null);