Fatal编程技术网
  • pagination/
  • Pagination DataTables-复选框选择-分页不保留所选复选框的值

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

pagination datatables

Pagination DataTables-复选框选择-分页不保留所选复选框的值,pagination,datatables,Pagination,Datatables,我在一个包含两个字段的表上使用jQuery datatables： A.图像名称 B图像大小 表的第一列（图像名称）包含我使用html添加的选择复选框。表中的数据是从文本文件更新的 有一个名为“生成图像集”的按钮。用户应该能够选择多个图像并单击“生成图像集”按钮，该按钮将显示带有所选图像名称的模式。然后，用户可以输入集合名称并提交 但是，现在的问题是，当datatables分页发生时，获取图像名称的字符串（显示在模式框中）只包含当前页面的图像名称。例如，如果我从第一个页面选择了两个图像，从第二个

我在一个包含两个字段的表上使用jQuery datatables： A.图像名称 B图像大小

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

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

但是，现在的问题是，当datatables分页发生时，获取图像名称的字符串（显示在模式框中）只包含当前页面的图像名称。例如，如果我从第一个页面选择了两个图像，从第二个页面选择了两个图像，并且当我按下“设置图像”按钮时，我在第二个页面上，则模式框中仅显示最后两个图像名称

是否有一种方法可以保留复选框的选择，以确保在模式上正确显示选择

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>


图像和SMU存储库
图像名称
文件大小

Datatables不知道在其单元格内所做的HTML更改，而是只有在使用该方法更新时才知道。分页期间未显示的项不会显示在DOM中，因此通过常规方法查找它们将不起作用。您必须通过dataTables API收集数据

幸运的是，看起来他们已经在他们的文档中构建了您所需要的基本内容。请注意，这使用了，您将需要multiselect选项。但是，假设您已选择下载并包含，您的初始化结果将如下所示：


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


当您想要获取所选项目时（这也是从中提取的）：

这将从dataTable中为所选的每一行返回一个数据数组，您可以在imagesumrep（）函数中使用该数组


如果你想用它做底座，我做了一个尝试
嗨，亚当！非常感谢你的帮助。我试着按照你的建议去实施，但还是犯了一些错误。我用新的代码更新了这个问题，还添加了代码中包含的脚本。再次感谢：）嘿，舒尔蒂。我忘了在代码中包含保存数据表的变量。我将更新itAdam，您在其中说“$（'input'）。在（'click'，function（）{…”上，我是否应该将“input”替换为需要使用此数据的按钮“Make image set”的id？是的，id或另一个适用于您的案例的jquery选择器。“input”只是作为一个占位符来告诉你这个想法-对于我的快速测试，如果你点击搜索栏，它会触发函数。我懒得做一个按钮：）我更新了JSFIDLE链接，现在包含了一个按钮，这可能会让你更清楚。这个按钮只是触发代码的一种方式。

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); 
           }
           }



<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>



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



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