javascript - jQuery datatables在行上导航时，已选择的行数据在分页表上被重置

我正在使用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('<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;
                 }
            }
}

有人可以帮我吗？

最佳答案

请看看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());
});

由于它是新选项和旧选项的组合，因此我对您的代码进行了少许更新。但是，我还没有使用aaData属性编辑旧服务器响应，因此您不必更改服务器端脚本。

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

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

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

关于javascript - jQuery datatables在行上导航时，已选择的行数据在分页表上被重置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29057980/