个人中心
gpt4 book ai didi

javascript - 带有寻呼机 DataTable 的复选框 "check/uncheck all"

转载 作者：行者123 更新时间：2023-11-29 03:22:06 25 4
gpt4 key购买 nike

我有一个显示 mysql 寄存器的动态表 (id, product, quantity, price)，每个寄存器都有一个 checkbox，另一个 checkbox “选中/取消选中所有” 对列表中的产品求和并显示在名为 total 的 input:text 上。

动态表有一个分页器，因为它上传了很多数据库的寄存器，checkbox 完美地工作，并进行求和，但它只是在第 1 页进行，当我切换到第 2 页，这是取消标记，我必须单击“选中/取消选中所有”才能标记第 2 页表格的所有复选框，并求和总和实际页面和最后一页，依此类推。

我想标记“选中/取消选中所有”的复选框，这可以选择所有页面的所有复选框列表动态表；

抱歉我的英语不好，谢谢。

我同时处理的寻呼机调用 DataTables，这是我正在使用的代码:

let buys = document.getElementById('tbl-buys');
let cboxAll = buys.querySelector('thead input[type="checkbox"]');
let cboxes = buys.querySelectorAll('tbody input[type="checkbox"]');
let totalOutput = document.getElementById('total');
let total = 0;

[].forEach.call(cboxes, function (cbox) {
  cbox.addEventListener('change', handleRowSelect);
});

cboxAll.addEventListener('change', function () {
  [].forEach.call(cboxes, function (cbox) {
    //cbox.checked = cboxAll.checked;
    cbox.click();
  });
});

function handleRowSelect (e) {
  let row = e.target.parentNode.parentNode;
  let qty = row.querySelector('td:nth-child(3)').textContent;
  let price = row.querySelector('td:nth-child(4)').textContent;
  let cost = Number(qty) * Number(price);

  if (e.target.checked) {
    total += cost;
  } else {
    total -= cost;
  }

  total = Number(total.toFixed(2));
  totalOutput.value = total;
}

$(document).ready(function(){
    $('#tbl-buys').DataTable({
      "columnDefs": [ { orderable: false, targets: [0] }],
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">

<table class="table table-striped table-bordered" data-page-length='2' id="tbl-buys">
  <thead>
    <tr>
      <th>
        <input type="checkbox"/>
      </th>
      <th>Producto</th>
      <th>Cantidad</th>
      <th>Precio</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Laptop Dell XPS 15</td>
      <td>1</td>
      <td>782.49</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Mouse bluetooth solar</td>
      <td>1</td>
      <td>19.90</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Sony Headphones 1000px</td>
      <td>1</td>
      <td>29.90</td>
    </tr>
    <tr>
      <td>
        <input type="checkbox"/>
      </td>
      <td>Intel x99</td>
      <td>1</td>
      <td>200.00</td>
    </tr>
  </tbody>
</table>

<label>Total</label>
<input type="text" id="total" class="form-control" readonly value="0.0" />

最佳答案

使用复选框插件，我不再需要跟踪复选框。因为他的插件在选中时将一行标记为已选中，所以我也不必再将数据标记为已选中。

简单的求和函数获取选定的行并对它们进行总计。我把总数放在工资栏的底部。

此代码在我自己的环境中工作，但无法将其放入 jsbin，因为我使用 ajax 从我的盒子上的 Web 服务获取数据。

我还使用了一个不同的插件，称为 autoNumeric 来格式化总数。

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.0.4/css/dataTables.checkboxes.css" rel="stylesheet" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="//cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
        <script src="//gyrocode.github.io/jquery-datatables-checkboxes/1.0.4/js/dataTables.checkboxes.js" type="text/javascript"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/autonumeric/1.9.46/autoNumeric.min.js" type="text/javascript"></script>
        <script>
            $(document).ready(function () {

                // the checkbox plugin selects the row when 
                // clicked so all this function has to do it get the selected rows.
                $.fn.dataTable.Api.register('sum()', function () {
                    var r = this.rows(".selected").data();
                    var total = 0;
                    $.each(r, function (i, it) {
                        total += it.salary;
                    });

                    // I put the number in the footer of the salary column
                    // using the autoNumeric plugin to format the amount.
                    $("#total").autoNumeric("set",total);
                });


                var table = $('#example').DataTable({
                    'processing': false,
                    // Again, this code will not work if serverSide is set to true.
                    'serverSide': false,
                    'ajax': {
                        // I used an asmx page in my own development environment to get the data.
                        url: 'wsService.asmx/GetDTDataSerializedList',
                        type: "post",
                        data: function(dtparms){
                            return JSON.stringify({ parameters: JSON.stringify(dtparms) });
                        },
                        contentType: "application/json; charset=utf-8",
                        dataFilter: function (dtData) {
                            var p = JSON.parse(dtData);
                            var d = JSON.parse(p.d);
                            return JSON.stringify({ data: d });
                        },
                    },
                    'columnDefs': [
                       {
                           'targets': 0,
                           'checkboxes': {
                           'selectRow': true
                           }
                       }

                    ],
                    'select': {
                        'style': 'multi'
                    },
                    'columns': [
                        { data: null },
                        { data: "name" },
                        { data: "position" },
                        { data: "office" },
                        { data: "extn" },
                        { data: "start_date" },
                        { data:"salary", className:".salary"}
                    ],
                    'order': [[1, 'asc']],
                    initComplete: function () {
                          $("#total").autoNumeric("init", { "currencySymbol": "$" });
                        $("#total").autoNumeric("set", 0);
                    }
                });


                // event handler for individual rows
                $("tbody" ).on("click","input[type=checkbox]", function () {
                    table.data().sum();
                });
                $("thead").on("click", "th input[type=checkbox]", function () {
                    table.data().sum();
                });

            });
        </script>
    </head>
    <body>
        <form>
            <div>
                <table class="display" id="example" cellspacing="0">
                    <thead>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th></th>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th id="total"></th>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </form>
    </body>
    </html>

关于javascript - 带有寻呼机 DataTable 的复选框 "check/uncheck all"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42565336/

25 4 0
文章推荐： python - MySQL-python 已经安装但仍然有 "ImportError: no module named MySQLdb"错误
文章推荐： Java - int 值 1 与 2,147,483,647 的内存分配
文章推荐： java - 返回今天前N天的测试方法
文章推荐： javascript - jQuery Ajax 通过多个复选框检查将数据存储到数据库
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com