Question

我在包含两个字段的表上使用jQuery数据表：一个。图像名称湾图像大小

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

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

但是，现在的问题是，当数据表分页发生时，获取图像名称的字符串（显示在模态框中）仅包含当前页面的图像名称。例如，如果我从第一页选择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的新手！我按照亚当的建议做了改变。现在，模态框根本没有打开，我收到一个错误 - “未捕获的ReferenceError：未定义dataTable”。

我包含的脚本是：

<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

数据表不知道在其单元格内进行的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();

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

如果你想用它作为基础

，我做了jsfiddle来试试这个

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

1 个答案: