web-dev-qa-db-ja.com

jQuery DataTablesを使用してすべてのページからチェックボックスを送信する方法

各行の最初のセル（td）を取得しようとしていますが、現在のページについてのみ取得しています。次のページに移動すると、前のページでチェックされたチェックボックスが送信されません。

<table class="table" id="example2">
    <thead><tr>

            <th>Roll no</th><th>Name</th></tr><thead>
        <?php
        $sel = "SELECT * FROM `st`";
        $r = mysqli_query($dbc, $sel);
        while ($fet = mysqli_fetch_array($r)) {
            ?>
            <tr>
                <td><?php echo $fet['trk'] ?></td>
                <td><input type="text" value="<?php echo $fet['ma'] ?>" id="man" class="form-control"></td>
                <td><input type="checkbox" id="check" name="myCheckbox" class="theClass"></td></tr>
        <?php } ?>


</table>

<input type="submit" id="sub_marks" class="btn btn-info" value="Submit & Continue">

<script src="plugins/datatables/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="plugins/datatables/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#example2').DataTable({
            "paging": true,
            "lengthChange": false,
            "searching": false,
            "ordering": true,
            "info": true,
            "autoWidth": false,
        })

    });
</script>

<script>


    $('#sub_marks').click(function () {

        var values = $("table #check:checked").map(function () {
            return $(this).closest("tr").find("td:first").text();
        }).get();
        alert(values);
    })
</script>
javascriptphpjqueryajaxdatatables
13
athira

原因

jQuery DataTablesは、パフォーマンス上の理由から、DOMから非表示の行を削除します。フォームが送信されると、表示されているチェックボックスのデータのみがサーバーに送信されます。

解決策1.フォームを送信する

フォームの送信時に、チェックされ、DOMに存在しない要素_<input type="checkbox">_を_<input type="hidden">_に変換する必要があります。

_var table = $('#example').DataTable({
   // ... skipped ...
});

$('form').on('submit', function(e){
   var $form = $(this);

   // Iterate over all checkboxes in the table
   table.$('input[type="checkbox"]').each(function(){
      // If checkbox doesn't exist in DOM
      if(!$.contains(document, this)){
         // If checkbox is checked
         if(this.checked){
            // Create a hidden element 
            $form.append(
               $('<input>')
                  .attr('type', 'hidden')
                  .attr('name', this.name)
                  .val(this.value)
            );
         }
      } 
   });          
});
_

解決策2：Ajax経由でデータを送信する

_var table = $('#example').DataTable({
   // ... skipped ...
});

$('#btn-submit').on('click', function(e){
   e.preventDefault();

   var data = table.$('input[type="checkbox"]').serializeArray();

   // Include extra data if necessary
   // data.Push({'name': 'extra_param', 'value': 'extra_value'});

   $.ajax({
      url: '/path/to/your/script.php',
      data: data
   }).done(function(response){
      console.log('Response', response);
   });
});
_

デモ

詳細とデモンストレーションについては、 jQuery DataTables：データをすべてのページから送信する方法 を参照してください。

ノート

  • 各チェックボックスには、一意の値が割り当てられたvalue属性が必要です。
  • 複数の要素にid属性checkを使用しないでください。この属性は一意であると想定されています。
  • JQuery DataTablesのpaging、infoなどのオプションを明示的に有効にする必要はありません。これらはデフォルトで有効になっています。
  • htmlspecialchars() 関数を使用して、HTMLエンティティを適切にエンコードすることを検討してください。たとえば、<?php echo htmlspecialchars($fet['trk']); ?>などです。
19
Gyrocode.com

送信直前にフォームに非表示要素を作成する必要はなく、送信前にデータテーブルを破棄するだけで、通常のようにすべてのページのすべてのチェックボックスが送信されます。

    $('form').on('submit', function (e) {
        $('.datatable').DataTable().destroy();
    });
2
Maaz Anzar
    <form action="Nomination" name="form">    
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables- example">
     <tbody>
     <%while (rs1.next()){%>  
      <tr> 
      <td><input type="checkbox"  name="aabb" value="<%=rs1.getString(1)%>" /></td>
      </tr>
      <%}%>
     </tbody>
     </table>
     </form>

正しいフォームIDとテーブルIDのスクリプトを追加します

      <script>
      var table = $('#dataTables-example').DataTable({
      // ... skipped ...
      });

      </script>


      <script>
      $('form').on('submit', function(e){
      var $form = $(this);
      table.$('input[type="checkbox"]').each(function(){
      if(!$.contains(document, this)){

      if(this.checked){

      $form.append(
      $('<input>')
      .attr('type', 'hidden')
      .attr('name', this.name)
      .val(this.value)
        );} } }); });
       </script>

これは作業コードです

0
anjali

Gyrocode.comのすばらしいコードですが、行に他の非表示の値がある場合は、フォームにもそれらを作成する必要があります。

私が使う ：

var table = $('#example').DataTable({
   // ... skipped ...
});

$("#buttonValidation").click(function(){                        
                                table.page.len(-1).draw();                        
});

フォームで送信する前に、ページ分割なしですべてのデータテーブルを画面に表示するだけです。表示を非表示にする場合は、css opacity：0を使用できます（display：noneは使用できません）。

0
user6087223