jquery数据表选择行的数据在页面上导航时在分页表上重置

我正在使用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, "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(''); var operationString = ''; operationString = operationString + ''; for ( var i = 0; i < aaData.operation.length; i++) { operationString = operationString+ '' + aaData.operation[i]+ ''; } operationString = operationString + ''; 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; } } } 

有人可以帮我吗？

Answer 1

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

HTML

 
 
select
operation
 
 
 
  Submit  

使用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(''); var select_name = 'select_' + data[0].id; html = '' + 'Select one' + '' + data[2].operation[0] + '' + '' + data[2].operation[1] + ''; + ''; $('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()); }); 

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

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

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

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

Answer 2

我为你解决了这个问题。 我建议你，制作2个html文件和1个javascript文件并插入我的代码（下面），并用它玩一下。 检查您的浏览器控制台，因为我添加了一些console.log，以便您可以详细了解正在进行的操作。

此外，这是一个很好的阅读主题： http ： //www.w3schools.com/html/html5_webstorage.asp

在我的示例中，您有2个html页面，每个页面有3个复选框。 每次在复选框之间切换时，页面都会重新加载（并且所有内存都会丢失）。 出于这个原因，我添加了一个JavaScript文件，它将您选中的复选框保存在用户浏览器的localStorage（一个javascript对象）中。

告诉我你是否仍然遇到麻烦。

第1页的HTML：

            Item #1 
  Item #2 
  Item #3 
 
 
 
  «  
 
1
 
2
 
  »  
 
 
     

第2页的HTML：

            Item #4 
  Item #5 
  Item #6 
 
 
 
  «  
 
1
 
2
 
  »  
 
 
     

来自嵌入文件“my_javascript.js”的JAVASCRIPT

 $("input").click(function(){ var key = $("input:hover").attr("name"); var value = $("input:hover").attr("name"); var item_is_present = false; console.log(key); console.log(value); if ( localStorage.getItem(key) != null ){ localStorage.removeItem(key); } else { localStorage.setItem(key, value); }; console.log(localStorage); console.log(localStorage.length); }); $(function(){ for ( var i = 0, len = localStorage.length; i < len; ++i ) { var myVar = localStorage.getItem( localStorage.key( i ) ) ; $("input[name=" + myVar + "]").prop("checked", true); } });