Question

我使用jquery创建了一个数据表。它有六列，第一列是复选框，最后一列是文本框。每当用户选择复选框时，都应显示所选复选框的计数。像这样：

以下是我的jQuery代码：

 $('#multiple-account-table').dataTable({
        "data": [
            {"accountNumber":"177723987389","name":"Account 1","alias":"dummy 1","dueDate":"10/19/2016","statementBalance":"34.60"},
            {"accountNumber":"3234344333","name":"Account 2","alias":"dummy 2","dueDate":"10/19/2015","statementBalance":"14.50"},
            {"accountNumber":"34343443443","name":"Account 3","alias":"dummy 3","dueDate":"10/19/2015","statementBalance":"15.50"},
            {"accountNumber":"43433442343","name":"dummy 4","alias":"dummy 4","dueDate":"10/19/2015","statementBalance":"15.50"},
            {"accountNumber":"13202553705","name":"dummy 5","alias":"dummy 5","dueDate":"09/19/2016","statementBalance":"100.50"}, 
            {"accountNumber":"13202553706","name":"dummy 6","alias":"dummy 6","dueDate":"12/19/2017","statementBalance":"18.50"},
            {"accountNumber":"13202553707","name":"dummy 7","alias":"dummy 7","dueDate":"01/01/2015","statementBalance":"105.50"},
            {"accountNumber":"13202553708","name":"dummy 8","alias":"dummy 8","dueDate":"10/19/2015","statementBalance":"15.50"},
            ],
        "dom": 'it',
        "pageLength": 8,
        "language": {
            "info": "",
            "emptyTable": "No records are available",
        },
        "columns": [
            {"data": null},
            {"data": "accountNumber"},
            {"data": "name"},
            {"data": "alias"},
            {"data": "dueDate"},
            {"data": "statementBalance"},
            {"data": null}

        ],
        "columnDefs": [
            {className: "pad-md-left-p-10 pad-top-bottom-p-10 white-active-bg mouse-link", "targets": [0,1,2,3,4,5,6]},
            {
                 'targets':   0,
                 'orderable': false,
                 'render': function(data, type, full, meta) {
                         return '<input type="checkbox" id="select-checkbox" name="payment-checkbox" class="multi-checkbox"/><label for="select-checkbox"></label>';
                 }
            },
            {
                'targets': 1,
                'render': function(data, type, full, meta) {
                        return  '<span id="pdf" class="stmt-identifier">'+data+'</span>';
                    }
             },
            {
                'targets': 4,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                $(nTd).text(date);
              }
             },
            {
                'targets': 5,
                'orderable': false,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('$'+sData);
                }
             },
             {
                'targets': 6,
                "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                    $(nTd).html('<span class="dollar-font-xs">$<input type="number" id="payement-textbox" class="payment" value="" name="payment-textbox" placeholder="--"/></span>');

                }
             }
            ],
        "aaSorting": [[4, 'asc'], [5,'desc'],  [1,'asc'] ],
        "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api(), data;

            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\$,]/g, '')*1 :
                    typeof i === 'number' ?
                        i : 0;
            };
            // Total over all pages
            total = api
                .column( 5 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );

            // Update footer
           $( api.column( 5 ).footer() ).html('<p class="total"><span>Total $' + total +'</span></p>');
        }

    }); //End of datatable function

您能否建议如何显示用户选择的复选框号码？

Answer 1

每次使用选中复选框时执行复选框计数：

var countChecked = function($table, checkboxClass) {
  if ($table) {
    // Find all elements with given class
    var chkAll = $table.find(checkboxClass);
    // Count checked checkboxes
    var checked = chkAll.filter(':checked').length;
    // Count total
    var total = chkAll.length;    
    // Return an object with total and checked values
    return {
      total: total,
      checked: checked
    }
  }
}

$(document).on('change', '.chk', function() {
  var result = countChecked($('#myTable'), '.chk');
  $('#checked').html(result.checked);
  $('#total').html(result.total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
Checked: <span id="checked"></span> / Total: <span id="total"></span>
<table id="myTable">
  <tbody>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
    <tr><td><input class="chk" type="checkbox" /></td><td>Text</td></tr>
  </tbody>
</table>

如何显示在datatable jquery中选中的复选框的数量？

1 个答案: