在页面浏览时，jquery数据表选择行的数据在分页表上重置 [英] jquery datatables selected row's data getting reset on paginated table while navigating on pages

问题描述

我正在使用jquery数据表。 http://jsfiddle.net/s3j5pbj4/2/
我填充了大约3000条记录问题是如果在第一页中选择几个复选框和下拉列表选项，并移动到下一页（通过点击分页的下一个按钮），并再次回到第一页，所选数据将再次重置（即让每个分页的页面在每个页面上显示10行，如果我在第一页上选择了5行，然后导航到下一页，然后再次返回到第一页所选行的数据再次复位）。我想我的用户应该能够看到他在任何页面上所做的所有选择，然后提交。

  $（document）.ready（function（）{
 var oTable = $（'＃dbResultsTable' dataTable（{
sPaginationType：full_numbers，
paging：true，
ordering：true，
scrollY：false，
自动宽度：false，
serverSide：false，
处理：false，
bDeferRender：true，
info：true，
长度菜单：[[10,25,50,100，-1]，[10,25,50,100，全部]]，
scrollX：100％，
 aoColumns：[
 
 {mDataProp：null}，
 
 {mDataProp：operation} 
]，
 
sAjaxSource：ResultPopulator，
bJQueryUI：true，
 fnRowCallback：function（nRow，aaData，iDisplayIndex）{
 
 jQuery（'td：eq ）'，nRow）.html（'< i nput id =checkId_'+ nRow +'name =type =checkbox）>'）; 
 var operationString ='< select name =operation>'; 
 
 operationString = operationString +'< option selected disabled hidden value =>< / option>'; 
 for（var i = 0; i< aaData.operation.length; i ++）{
 operationString = operationString +'< option>'+ aaData.operation [i] +'< / option> '; 
} 
 
 operationString = operationString +'< / select>'; 
 jQuery（'td：eq（1）'，nRow）.html（operationString）; 
 return nRow; 
}，
} 
）; 
  

}）;

  function validateFields（）{
 var status = true; 
 var rowSelected = false; 
 var rows = $（＃dbResultsTable）。dataTable（）。fnGetNodes（）; （var i = 0; i< rows.length; i ++）
 {
 var cells = rows [i] .cells; 
 if（cells [0] .children [0] .checked）{
 rowSelected = true; 
 var operation = cells [1] .children [0] .value; 
 if（operation ==）{
 var msz =请选择一个操作
 status = false; 
 printMsz（msz）; 
 break; 
} 
} 
} 
  

有人可以帮助我？

解决方案

请查看我在JSFiddle上的解决方案。

HTML

 < table id =testclass =display> 
< thead>< tr>< th> select< / th>< th>< / th>< / tr>< / thead> 
< tbody>< / tbody> 
< / table> 
 
< p> 
< input id =test-data-jsonname =test_data_jsontype =hidden> 
< button id =btn-submit>提交< / button> 
< / p> 
  

Javascript：

  // ajax emulation 
 $ .mockjax（{
 url：'/ test / 0'，
 responseTime：200，
 responseText：{
aaData：[
 [{id：1}，{chk：on}，{operation：[Modify，Delete]} ]，
 [{id：2}，{chk：on}，{operation：[Modify，Delete]}]，
 [{id ：3}，{chk：on}，{operation：[Modify，Delete]}]，
 [{id：4}，{chk on}，{operation：[Modify，Delete]}]，
 [{id：5}，{chk：on}，{operation [修改，删除]}]，
 [{id：6}，{chk：on}，{操作：[修改，删除 ]，
 [{id：7}，{chk：on}，{operation：[Modify，Delete]}] 
] 
 } 
}）; 
 
 //保存数据表中控件的当前状态的全局变量
 var g_data = {}; 
 
 var $ table = $（'＃test'）; 
 $ table.dataTable（{
lengthMenu：[[2,25,50,100，-1]，[2,25,50,100，All]]，
pagingType：full_numbers，
paging：true，
ordering：true，
scrollY：false，
autoWidth b $ bserverSide：false，
处理：false，
info：true，
deferRender：true，
processing b $ b列：[
 [data，1]，
 [data，2] 
]，
ajax：{
 url：/ test / 0，
dataSrc：function（json）{
 var data = json.aaData; 
 for（var i = 0; i< data .length; i ++）{
 var chk_name ='chk_'+ data [i] [0] .id; 
 
 //如果从未检查复选框
 if（typeof g_data [chk_name] ==='undefined'）{
 //从收到的数据中检索复选框状态
 g_data [chk_name] =（data [i] [1] .chk ==='on'）？ true：false; 
} 
 } 
 
返回数据; 
} 
}，
createdRow：function（row，data，index）{
 var chk_name ='chk_'+ data [0] .id; 
 var chk_checked =（g_data [chk_name]）？ 检查：; 
 
 $（'td：eq（0）'，row）
 .html（'< input name ='+ chk_name +'type =checkboxvalue =1 '+ chk_checked +'>'）; 
 
 var select_name ='select_'+ data [0] .id; 
 html = 
'< select name ='+ select_name +'>'
 +'< option value =>选择一个< / option>'
 +'< option'
 +（（typeof g_data [select_name]！=='undefined'&& g_data [select_name] === data [2] .operation [0]）？'selected '：''）
 +'>'+ data [2] .operation [0] +'< / option>'
 +'< option'
 +（（typeof g_data [select_name]！=='undefined'&& g_data [select_name] === data [2] .operation [1]）？'selected'：''）
 +'>'+ data [2] .operation [1] +'< / option>'; 
 +'< / select>'; 
 
 $（'td：eq（1）'，row）.html（html）; 
}，
}）; 
 
 $（'＃test tbody'）。on（'click'，'input [type = checkbox]'，function（e）{
 g_data [this.name] = this。检查; 
}）; 
 
 $（'＃test tbody'）。on（'change'，'select'，function（e）{
 if（this.selectedIndex！= -1）{
 var value = this.options [this.selectedIndex] .value; 
 g_data [this.name] = value; 
} 
}）; 
 
 $（'＃btn-submit'）。on（'click'，function（）{
 $（'＃test-data-json'）。val（JSON.stringify g_data））; 
 console.log（$（'＃test-data-json'）。val（））; 
}）; 
  

我稍微更新了您的代码，因为它是新的和旧的选项的混合。但是，我没有使用 aaData 属性来编辑旧服务器响应，因此您不必更改服务器端脚本。

基本上，解决方案是在我的示例中使用一个变量（ g_data ）来存储/检索动态窗体控件的状态。

在提交表单时，数据将作为JSON字符串存储在隐藏的 INPUT 元素中。

可选地，如果需要表单验证，请检查存储在 g_data 变量中的控件的状态。

I am using jquery datatables . http://jsfiddle.net/s3j5pbj4/2/ I am populating around 3000 records in paginated table.Problem is that If am selecting few checkbox and dropdown options in first page and move to next page (by clicking on paginated next button) and again come back on first page , selected data is getting reset again (i.e. lets say every paginated page shows 10 rows on each page and if I have selected 5 rows on first page and then navigate to next page and again come back to first page selected row's data getting reset again). I want my user should be able to see what all selection he made on any page and then submit .

    $(document).ready(function() {
            var oTable = $('#dbResultsTable').dataTable({
                "sPaginationType": "full_numbers" ,
                "paging":   true,
                "ordering" : true,
                "scrollY":false,
                "autoWidth": false,
                "serverSide": false,
                 "processing": false,
                  "bDeferRender": true,
                "info":     true ,
                "lengthMenu": [[10,25,50 ,100, -1], [10,25,50, 100, "All"]],
                "scrollX": "100%" ,
                 "aoColumns":[

            { "mDataProp": null},

            { "mDataProp": "operation"}
      ],

        "sAjaxSource" : "ResultPopulator",
        "bJQueryUI" : true,
        fnRowCallback : function(nRow,aaData, iDisplayIndex) {

        jQuery('td:eq(0)', nRow).html('<input id="checkId_' + nRow+ 'name="" type="checkbox")>');
        var operationString = '<select name="operation" >';

        operationString = operationString + '<option selected disabled hidden value=""></option>';
for ( var i = 0; i < aaData.operation.length; i++) {
operationString = operationString+ '<option>'   + aaData.operation[i]+ '</option>';
}

    operationString = operationString   + '</select>';
jQuery('td:eq(1)', nRow).html(operationString);
return nRow;
},
}
);

});

function validateFields(){
    var status = true;
     var rowSelected = false ;
      var rows = $("#dbResultsTable").dataTable().fnGetNodes();
        for (var i = 0; i < rows.length; i++) {
            var cells = rows[i].cells;
            if(cells[0].children[0].checked){
                 rowSelected = true;
                 var operation =  cells[1].children[0].value;
                 if(operation==""){
                    var msz = " Please select an operation"  
                    status = false ;
                    printMsz(msz);
                     break;
                 }
            }
}

Can somebody help me on this ?

解决方案

Please take a look at my solution at JSFiddle.

HTML

<table id="test" class="display">
    <thead><tr><th>select</th><th>operation</th></tr></thead>
    <tbody></tbody>
</table>

<p>
    <input id="test-data-json" name="test_data_json" type="hidden">
    <button id="btn-submit">Submit</button>
</p>

Javascript:

//ajax emulation
$.mockjax({
   url: '/test/0',
   responseTime: 200,
   responseText: {
      "aaData" : [
         [{"id":1}, {"chk":"on"}, {"operation":["Modify", "Delete"]}],
         [{"id":2}, {"chk":"on"}, {"operation":["Modify", "Delete"]}],
         [{"id":3}, {"chk":"on"}, {"operation":["Modify", "Delete"]}],
         [{"id":4}, {"chk":"on"}, {"operation":["Modify", "Delete"]}],
         [{"id":5}, {"chk":"on"}, {"operation":["Modify", "Delete"]}],
         [{"id":6}, {"chk":"on"}, {"operation":["Modify", "Delete"]}],
         [{"id":7}, {"chk":"on"}, {"operation":["Modify", "Delete"]}]
      ]
   }
});

// Global variable holding current state of the controls in the data table
var g_data = {};

var $table = $('#test');
$table.dataTable( {
   "lengthMenu": [[2,25,50 ,100, -1], [2,25,50, 100, "All"]],
   "pagingType": "full_numbers" ,
   "paging":   true,
   "ordering" : true,
   "scrollY":false,
   "autoWidth": false,
   "serverSide": false,
   "processing": false,
   "info":     true ,
   "deferRender": true,
   "processing": true,
   "columns": [
      ["data", 1 ],
      ["data", 2 ]
   ],
   "ajax" : {
      "url": "/test/0",
      "dataSrc" : function(json){
         var data = json.aaData;
         for (var i = 0; i < data.length; i++){
            var chk_name  = 'chk_' + data[i][0].id;

            // If checkbox was never checked
            if(typeof g_data[chk_name] === 'undefined'){
               // Retrieve checkbox state from received data
               g_data[chk_name] = (data[i][1].chk === 'on') ? true : false;
            }
         }

         return data;
      }
   },
   "createdRow" : function( row, data, index ){
      var chk_name  = 'chk_' + data[0].id;
      var chk_checked = (g_data[chk_name]) ? " checked" : "";

      $('td:eq(0)', row)
         .html('<input name="' + chk_name +'" type="checkbox" value="1"' + chk_checked + '>');

      var select_name = 'select_' + data[0].id;
      html =
         '<select name="' + select_name +'">'
          + '<option value="">Select one</option>'
          + '<option'
          + ((typeof g_data[select_name] !== 'undefined' && g_data[select_name] === data[2].operation[0]) ? ' selected' : '')
          + '>' + data[2].operation[0] + '</option>'
          + '<option'
          + ((typeof g_data[select_name] !== 'undefined' && g_data[select_name] === data[2].operation[1]) ? ' selected' : '')
          + '>' + data[2].operation[1] + '</option>';
          + '</select>';

      $('td:eq(1)', row).html(html);
   },
});

$('#test tbody').on('click', 'input[type=checkbox]', function (e){
   g_data[this.name] = this.checked;
});

$('#test tbody').on('change', 'select', function (e){
   if(this.selectedIndex != -1){
      var value = this.options[this.selectedIndex].value;
      g_data[this.name] = value;
   }
});

$('#btn-submit').on('click', function(){
   $('#test-data-json').val(JSON.stringify(g_data));
   console.log($('#test-data-json').val());
});

I have slightly updated your code since it was a mix of new and legacy options. However I haven't edited legacy server response using aaData property, so you don't have to change your server-side script.

Basically, the solution is to use a variable (g_data in my example) to store/retrieve state of dynamic form controls.

Upon form submission, the data is stored in hidden INPUT element as JSON string.

Optionally, if form validation is needed, inspect the state of controls stored in g_data variable.

这篇关于在页面浏览时，jquery数据表选择行的数据在分页表上重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！