Нумерация страниц с выбранными флажками. Флажки будут работать только на текущей странице пагинации. JQuery Datatables

Question

Я использую плагин jquery datatables .

У меня есть просто HTML-таблица для этого.

<table  class="display" id="contactsTable">  
    <thead> 
        <tr>  
            <th>Id</th> 
            <th>Email</th> 
            <th>Name</th> 
            <th>Phone</th>  
            <th>City</th>    
            <th>State</th>    
            <th>Arrival</th>  
            <th>Departure</th> 
            <th>Inserted</th> 
            <th>Check</th> 
        </tr> 
    </thead> 
    <tbody>    
                    <tr>             
            <td>301</td> 
            <td>email address</td>    
            <td>Test</td> 
            <td></td> 
            <td></td> 
            <td></td> 
            <td>July 14 2011</td> 
            <td>July 23 2011</td> 
            <td>April 12 2011 07:05</td> 
            <td><input type="checkbox" name="selected[]" value="301" class="chkbox"/></td> 
        </tr> 
                    <tr>             
            <td>300</td> 
            <td>email</td>    
            <td>Test</td>  
<td></td> 
            <td></td> 
            <td></td>               
            <td>September 02 2011</td> 
            <td>September 10 2011</td> 
            <td>April 11 2011 12:01</td> 
            <td><input type="checkbox" name="selected[]" value="300" class="chkbox"/></td> 
        </tr> 

Вот мой код для отправки (только временная).

<input id="submitButton" type="submit" value="Submit" onclick="test()" />

И мой javascript для сопоставления флажков с массивом.

function test() {
        var values = $('input:checkbox:checked.chkbox').map(function () {
            return this.value;
        }).get();
        console.log(values);
    }

Вот код данных

 $(document).ready(function() {  

    var selected;
    var selectedOutput = '#selectedOutput';
    var template = 'selectedTemplate';
    var submitButton = '#submitButton'

    var  dTable = $('#contactsTable').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "bPaginate": true,
        "bLengthChange": true,
        "bFilter": true,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": false,
        "bProcessing": true,
        "aoColumns": [
            {"bVisible": false }, //keep the id invisble    
            null,
            null,     
            null,
            null,
            null,
            null,
            null,
            null,
            null
        ]
    });     

Проблема в том, что я не могу сделать флажок на странице. Таблица содержит несколько страниц. Если я нажму "отправить", он отправит только массив флажков для текущей страницы, на которой я нахожусь.

Надеюсь, это достаточно ясно. Я не уверен, что происходит. Спасибо за любую помощь.

Answer 1

Я думаю, вы могли бы взглянуть на это , это может решить вашу проблему.

Этот пример может быть вам полезен, так как кажется, что это именно ваш случай (в этом используется fnGetNodes (), а в другой ссылке объясняется, как использовать fnGetHiddenNodes (), если первая функция не работает) : http://datatables.net/examples/api/form.html

Answer 2

ПРИЧИНА

jQuery DataTables удаляет невидимые строки из DOM по соображениям производительности, поэтому при отправке формы отправляются только видимые флажки.

РЕШЕНИЕ

Вам может потребоваться преобразовать те <input type="checkbox">, которые отмечены и не существуют в DOM, в <input type="hidden"> после отправки формы.

Например, чтобы отправить форму со значениями всех флажков:

var table = $('#example').DataTable();

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

Если вы отправляете форму через Ajax, это еще проще.

Например, чтобы отправить форму через Ajax со значениями всех флажков:

var table = $('#example').DataTable();

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

   $.ajax({
      url: "/path/to/your/script.php",
      data: table.$('input[type="checkbox"]').serialize();
   }).done(function(data){
      console.log("Response", data);
   });
});

DEMO

См. jQuery DataTables: Как отправить все страницы данных формы для получения дополнительной информации и демонстрации.

Answer 3

var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = CHECK_BOXES_COUNT_OR_ROW_COUNT;
oTable.fnDraw();

Это должно решить проблему для вас