仅在数据表中选中当前页面上的所有复选框

Question

我需要一个解决方案。这是我想要做的。我有一个数据表，在第一列中有一些值和复选框。我需要的是当我选择标题中的复选框时，它应该只选择当前页面中的所有值。但是所有页面的所有复选框都被选中。

我也希望，当我导航到数据表的另一页时，应取消选中所有前一页的复选框选择，包括标题中的复选框。

听到是我的代码：

<?php if($acl->can('view_article')){ ?> 
<table id="articles" class="table table-striped table-bordered"        cellspacing="0" width="100%">
<thead>
    <tr>
        <?php if($acl->can('delete_article')){ ?>
        <th><input id="select_all_existent" type="checkbox" /></th>
        <?php } ?>
        <th>Article</th>
        <th>Categories</th>
        <th>Demographic</th>
        <th>Intended Month</th>
        <th class="text-right">Word Count</th>


    </tr>
</thead>
<tbody>
    <?php
    foreach($articles as $article) {
        $id =                   $article["id"];
        $uid =                  $article["uid"];
        $article_name =         $article["article_name"];
        $article_file_path =    $article["article_file_path"];
        $article_category =     $article["article_category"];
        $article_demographic =  $article["article_demographic"];
        $article_word_count =   $article["article_word_count"];
        $intended_month =        $article["intended_month"];
        $article_created    =   $article["article_created"];
        if(!empty($article_demographic)) {
            $article_demographic = implode(", ",$article_demographic);
        }
        $article_keywords =     $article["article_keywords"];
        $article_description =  $article["article_description"];
        $checkbox =  in_array($id, $assigned_articles)? " ":"<input type='checkbox' value=".$id." />";

        echo "
            <tr class='' data-id='$id'>
                " ;
                if($acl->can('delete_article'))
                echo "<td>$checkbox</td>";

                if($acl->can('edit_article')){
                echo "<td>" . anchor("articles/edit/$id",$article_name.'- '.$article_word_count,"class='notBtn' title=\"$article_description\"") . " </td>";
                }else{
                echo "<td>$article_name - $article_word_count</td>";    
                }


        echo "
                <td>".short_string($article_category)."</td>
                <td>".short_string($article_demographic)."</td>
                <td> $intended_month </td>
                <td align='right'>$article_word_count</td>

            </tr>";
    }
    ?>
</tbody>
</table>
<?php } ?>
<script type="application/javascript">

    $(document).on( 'init', function ( e, settings ) {
        alert( 'Saved page length is: '+ table.state().length );
    } );

$(document).ready(function(){

    var oTable = $("#articles").DataTable({
        "stateSave": true,
         "order": [],
        "dom": '<"row" <"col-md-12 space" <"datatable-action pull-left"> <"datatable-n pull-right" l > > >rt <"row" <"col-md-6"  i > <"col-md-6" p > >',
        "columns" : [
                     <?php if($acl->can('delete_article')){ ?>
                    {orderable: false, searchable: false},
                    <?php } ?>
                    {"width": "25%" },
                    null,
                    null,
                    {"width": "12%" },
                    {"width": "10%" },

                                          ],

        "fnDrawCallback": function( oSettings ) {


            $('.popupArticle').viewArticle({
                url : '<?=site_url("articles/showArticleInPopup");?>',
                title : 'Article Preview',
                size : 'lg'
            });

            }                                             

    });

    $('#search-inp').on('keyup',function(){
          oTable.search($(this).val()).draw() ;
    })

    if(oTable.state().length != 0)
    $('#search-inp').val(oTable.state().search.search);

    checkAllCheckbox(oTable);

    var deletebtn = '';
    <?php if($acl->can('delete_article')){ ?>
    var deletebtn = '<a href="delete" id="deletebtn" data-toggle="tooltip" title="Delete Articles" data-title="Delete Articles" class="btn btn-primary"><i class="fa fa-trash-o"></i></a>';
    <?php } ?>

    var assignbtn = '';
     <?php if($acl->can('assign_article')){ ?>
    var assignbtn = '<a href="#" id="assignbtn" title="Assign Articles"  class="btn btn-primary" data-toggle="modal" data-target="#assignArticlePopup"><i  class="fa fa-paperclip"></i></a>';
    <?php } ?>
       $("div.datatable-action").html(deletebtn + ' ' +assignbtn);


    $('#assignbtn').on('click', function (e) {
  e.preventDefault();
      eModal.setEModalOptions({loadingHtml : ''});
      eModal.iframe('<?= site_url("assignArticles/e/"); ?>', 'Assign  Article').then(function (input) {
$('.modal-dialog', window.document).css('width', '80%');

if ($('.modal-footer', window.document).length == 0) {
    $('.modal-content', window.document).append('<div class="modal-footer">  </div>');
}


  });

});  

});

</script>

这里是 checkAllCheckbox(oTable); 的代码

function checkAllCheckbox(oTable) {

/* Check all in Datatable*/

if ($("#select_all_existent").length != 0) {

    var cells = oTable.cells().nodes();

    $("#select_all_existent").change(function () {
        $(cells).find(":checkbox").prop("checked", $(this).is(":checked"));
    });

    $(cells).find(":checkbox").change(function(){
        if(!$(this).is(":checked")){
            $("#select_all_existent").prop("checked",  $(this).is(":checked"));
        }
        else{
             if ($(cells).find(":checkbox").length ==  $(cells).find(":checked").length) {
               $("#select_all_existent").prop("checked",true);
             }               
        }

      if ($(cells).find(":checked").length > 0) {
           $(oTable.table().container()).siblings().find('.help- block').html('');
      }  
      else{

          $(oTable.table().container()).siblings().find('.help- block').html('Please select at least one checkbox');  
      } 

    });


}

}

对我提到的场景的任何帮助将不胜感激。

Answer 1

在你的代码中做了如下修改并尝试：

更改 1：禁用复选框列的排序

<thead>
  <tr>
    <?php if($acl->can('delete_article')){ ?>
    <th data-orderable="false"><input id="select_all_existent" type="checkbox" /></th>
    <?php } ?>
    <th>Article</th>
    <th>Categories</th>
    <th>Demographic</th>
    <th>Intended Month</th>
    <th class="text-right">Word Count</th>
  </tr>
</thead>

更改 2：

将以下代码添加到脚本中：

    $('#articles').on('page.dt', function() {
        $('#select_all_existent').prop("checked", 0);
        $('#select_all_existent').trigger('change');
    });

    $('#articles').on('length.dt', function() {
        $('#select_all_existent').prop("checked", 0);
        $('#select_all_existent').trigger('change');
    });


    $('#select_all_existent').on('change',function () {
       checkAllCheckbox(oTable);
    });