pagination - DataTables - 复选框选择 - 分页不保留所选复选框的值

Question

我在包含两个字段的表上使用 jQuery 数据表:一种。图片名称b.图片大小

表格的第一列(图像名称)包含我使用 html 添加的供选择的复选框。表中的数据是从文本文件更新的。

有一个名为制作图像集的按钮。用户应该能够选择多个图像并单击制作图像集按钮，这将显示一个带有所选图像名称的模态。然后用户可以输入一个集合名称并提交。

但是现在的问题是，datatables分页时，获取图片名称的字符串(显示在模态框上)只包含当前页面的图片名称。例如，如果我从第一页选择 2 个图像，从第二页选择 2 个，并且当我按下“制作图像集”按钮时我在第二页上，只有最后两个图像名称显示在模式框中。

有没有一种方法可以保留复选框的选择，以确保在模态框上显示正确的选择？

Javascript 代码:

        var cellsSelected="";
$(document).ready(function() {
var dataTable = $('#table_id').DataTable( {
    columnDefs: [ {
        orderable: false,
        className: 'select-checkbox',
        targets:   0
    } ],
    select: {
        style:    'multi',
        selector: 'td:first-child'
    },
    lengthMenu: [[5,10, 25, -1], [5, 10, 25, "All"]],
    pageLength: 5 
} );
          $('checkboxed').on('click', function() {
    cellsSelected = dataTable.rows({ selected: true }).data();
});

            $('#settable_id').dataTable({
    "lengthMenu": [[5,10, 25, -1], [5, 10, 25, "All"]],
        "pageLength": 5
});
} );

HTML 代码:

<table id="table_id" class="table table-responsive table-bordered table-condensed">
   <thead>
      <tr>
         <th colspan= "2" class="text-center"><span style="color:white;" aria-hidden="true"><font size="3"><strong>Image & SMU Repository </strong></font></span>
</th>
      </tr>
      <tr>
         <td class="text-center verticalalign" style="vertical-align: middle; background-color: #98b6d9;"><span style="color: black;" aria-hidden="true"><strong>Image Name</strong></span></td>
         <td class="text-center verticalalign" style="vertical-align: middle; background-color: #98b6d9;"><span style="color: black;" aria-hidden="true"><strong>File Size</strong></span></td>
      </tr>
   </thead>
   <tbody>
      <form role="form" id="myForm" method="post">
         <div class="form-group">
            <?php $first1 = ""; $second1 = "";$str = 'size';$a=0;$mylines = file('./view_images.txt');foreach($mylines as $myline){$first1 = $second1;$second1 = $myline;$str1 = (string)$second1;if($a == 1){$sizeChunks = explode(",", $second1); ?>
            <td style="vertical-align: middle;"><span style="color:black;"><a href="./Repository.php" title="MD5 = <?php echo $sizeChunks[1] ?> " class="myClass"><?php echo preg_replace('~\D~', '', $sizeChunks[0]); ?></a></span></td>
            <?php $a=0;continue;}if($first1 == "" or $first1 == "\n"){?>
            <tr>
               <td style="vertical-align: middle;" >
                  <div class="checkbox"><label><input type="checkbox" id="checkboxed" name="myCheck" value="<?php echo $second1; ?>"><span style="color:black;"><?php echo trim($second1); ?></span></label></div>
               </td>
               <?php }else{if($second1 == "\n"){?> 
            </tr>
               <?php } else{if(strcmp(trim($str1), trim($str)) == 0){ $a=1;continue;}?>
            <td style="vertical-align: middle;"><span style="color:black;"><?php echo trim($second1); ?></span></td>
            <?php }}}?>
         </div>
      </form>
   </tbody>
</table>
<div class="modal fade" id="myModal" role="dialog">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title"><span style="color:black;" aria-hidden="true"></span>Create Image Sets</h4>
                    </div>
                    <div class="modal-body" id="imgmodal">
                    </div>
                    <div class="modal-footer">

                    <button type="submit" class="btn btn-primary" id="submitimgset"><span style="color:black;" aria-hidden="true"></span>Submit</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><span style="color:black;" aria-hidden="true></span>Cancel</button>
</div>
                </div>
            </div>
        </div>

制作图像设置按钮 -

<button type="button" class="btn btn-primary btn-md" data-target="#myModal" id="make_image_set_id" onclick="imagesumrep()"><span style="color:black;" aria-hidden="true"></span>Make Image Set</button>

按钮的 Javascript 函数 -

function imagesumrep() {
            if(cellsSelected == ""){
                document.getElementById('imgmodal').innerHTML= "Error! <br> Please select images and try again!";

                                  $('#myModal').modal('show'); 

            }
            else{   
            document.getElementById('imgmodal').innerHTML= "<h4><strong><u>Images Selected:</u></strong></h4>" + "<strong>" + cellsSelected + "</strong> "+ "<br /><br />"+ "<h4><strong><u>Image Set Name:</u></strong></h4>" + "<input type ='text' name='setName' id='noname' size='70'><br /><br />";
            setTimeout(function(){
                                  $('#myModal').modal('show'); 
                              }, 600); 
           }
           }

请帮帮我!我是 DataTables 的新手!我已经按照亚当的建议进行了更改。现在，模态框根本没有打开，我收到一个错误 - “Uncaught ReferenceError: dataTable is not defined”。

我包含的脚本是:

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.0/js/dataTables.select.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/plug-ins/1.10.12/sorting/num-html.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.css" />
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.0/css/select.dataTables.min.css" />

<script src="bootstrap/js/bootstrap.min.js"></script>

Answer 1

Datatables 不知道在其单元格内所做的 HTML 更改，而是仅当您使用 cell().data() 更新它时才知道方法。分页时未显示的项目不会显示在 DOM 中，因此通过常规方式查找它们将行不通。您必须通过 dataTables API 收集数据。

幸运的是，看起来他们基本上已经内置了您需要的 checkbox example在他们的文档中。请注意，这使用了 select extension ，您将需要多选选项。但是，假设您已经选择下载并包含在内，您的初始化最终会看起来像这样:

$(document).ready(function() {
    var dataTable = $('#table_id').DataTable( {
        columnDefs: [ {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
        } ],
        select: {
            style:    'multi',
            selector: 'td:first-child'
        },
        lengthMenu: [[5,10, 25, -1], [5, 10, 25, "All"]],
        pageLength: 5 
    } );
} );

当您想获取所选项目时(这也是从 dataTables example 中提取的):

var dataSelected = dataTable.rows({ selected: true }).data();

这将从数据表中为所选的每一行返回一个数据数组，您可以在 imagesumrep() 函数中使用它。

我做了一个jsfiddle如果您想将其用作基础，请尝试一下