自定义检查datatables框架的所有复选框问题

时间:2017-10-05 12:04:05

标签: jquery datatables

当我选择手动项目复选框并使用CSV按钮导出项目时工作正常,但如果单击选中顶部的所有复选框,则只是数据表框架不会选中所有复选框。我的目标数据导出应该与我选择的全部和手动一起使用。我该如何解决?任何想法?......

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Real App</title>

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet"/>
    <link href="https://cdn.datatables.net/buttons/1.2.4/css/buttons.dataTables.min.css" rel="stylesheet"/>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/select/1.2.3/css/select.dataTables.min.css">


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>

    <script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.bootstrap.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.html5.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.4/js/buttons.print.js"></script>

    <script src="https://cdn.datatables.net/select/1.2.3/js/dataTables.select.min.js"></script>
<style>
    table.dataTable tbody td.select-checkbox, table.dataTable tbody th.select-checkbox {
      position: static !important;
    }
</style>
</head>

<body>
<div class="container">
                <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap no-footer dtr-inline dataTable" role="grid" aria-describedby="datatable-responsive_info" style="width: 100%;" cellspacing="0" width="100%">
                    <tbody>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1159" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/132148971575-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/51qhWQ3VG7L._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/132148971575" id="titleText" value="LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New" id="linkText" target="_blank">LG Stylo 3 16GB LTE Smartphone for Boost Mobile - New</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/B06Y6J869C" id="" target="_blank">LG Stylo 3 - Prepaid - Carrier Locked - Boost Mobile</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/B06Y6J869C" target="_blank">B06Y6J869C</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 119.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 119.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ -17.7
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1159" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1159"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1158" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/142129917740-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/31qQlocEU8L._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/142129917740" id="titleText" value="HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New" id="linkText" target="_blank">HTC One A9 32GB Opal Silver for Boost Mobile &#194;– New</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/B01M0OBVW2" id="" target="_blank">HTC One A9 - Retail Packaging (Boost Mobile) - Carrier Locked - Opal Silver</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/B01M0OBVW2" target="_blank">B01M0OBVW2</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 120.91
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 109.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ -27.17
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1158" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1158"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1157" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/252503208819-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/51-dHInCIRL._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/252503208819" id="titleText" value="Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate " id="linkText" target="_blank">Fireplace Fence Baby Safety Fence Hearth Gate Pet Cat Dog BBQ Metal Fire Gate </a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/B075YR25TM" id="" target="_blank">JAXPETY Adjustable Weight Bench Barbell Incline Flat Lifting Workout Body Press Home Gym</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/B075YR25TM" target="_blank">B075YR25TM</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 71.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 52.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ -26.98
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1157" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1157"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>
                            <tr role="row" class="pointer odd">
                                <td>
                                    <input type="checkbox" id="checkItem" class="checkItem" name="checkItem" value="1152" /><br />

                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img id="ebayImg" src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="http://i.ebayimg.com/images/i/252193780226-0-1/s-l250/p.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" tabindex="0" width="5%">
                                    <ul class="enlarge">
                                        <!--We give the list a class so that we can style it seperately from other unordered lists-->
                                        <!--First Image-->
                                        <li>
                                            <img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg" height="60px" width="60px">
                                            <span>
                                                <!--span contains the popup image-->
                                                <img src="https://images-na.ssl-images-amazon.com/images/I/41T3BwQbIkL._AC_US218_.jpg">
                                            </span>
                                        </li>
                                    </ul>
                                </td>
                                <td class="sorting_1" width="30%">
                                    <h5><b><a href="http://www.ebay.com/itm/252193780226" id="titleText" value="Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate" id="linkText" target="_blank">Adjustable Indoor Solid Wood Construction Pet Fence Gate Free Standing Dog Gate</a></b></h5>

                                </td>
                                <td class="sorting_1" style="text-align:left" width="30%">
                                    <h5><a href="https://rads.stackoverflow.com/amzn/click/B075BHLJN7" id="" target="_blank">JAXPETY Electric Knife Sharpener 2 Stage Kitchen Blade Sharpening System New</a></h5>
                                </td>
                                <td class="sorting_1">
                                    <a href="https://rads.stackoverflow.com/amzn/click/B075BHLJN7" target="_blank">B075BHLJN7</a>
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 17.59
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="7%">
                                    $ 44.99
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    $ 20.58
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">
                                    0
                                </td>
                                <td class="sorting_1" style="text-align:left;" width="10%">

                                    <a class="btnWatchList" value="1152" data-toggle="modal" data-target="#myModal"><i class="fa fa-edit"></i></a>
                                    <a class="deleteBulkItem" value="1152"><i class="fa fa-trash"></i></a>
                                </td>
                            </tr>


                    </tbody>
                    <thead>
                        <tr role="row">
                            <th class="column-title">Check all: <input type="checkbox" id="checkAll" class="chkAll"></th>

                            <th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Ebay Image</th>
                            <th class="sorting_asc" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 60px;" aria-label=": activate to sort column descending" aria-sort="ascending">Amazon Image</th>

                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Ebay Title</th>

                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon Title</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">ASIN</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">Amazon price</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending">eBay price</th>

                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Profit</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px; text-align:center;" aria-label="Product name: activate to sort column ascending">Sales</th>
                            <th class="sorting" tabindex="0" aria-controls="datatable-responsive" rowspan="1" colspan="1" style="width: 771px;" aria-label="Product name: activate to sort column ascending"></th>
                        </tr>
                    </thead>
                </table>


<!-- <link rel="stylesheet" href="/Remodal/dist/remodal.css" />
<link rel="stylesheet" href="/Remodal/dist/remodal-default-theme.css" />
<script src="/Remodal/dist/remodal.min.js"></script>

<script src="/Content/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/Content/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/Content/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/Content/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/Content/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/Content/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/Content/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/Content/vendors/datatables.net-scroller/js/datatables.scroller.min.js"></script>
<script src="/Content/vendors/jszip/dist/jszip.min.js"></script>
<script src="/Content/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="/Content/vendors/pdfmake/build/vfs_fonts.js"></script> -->

<script>
    var type_id;
    $('select').change(function () {
        type_id = this.options[this.selectedIndex].parentNode.label;
    });

    $(document).ready(function () {
        var table = $('#datatable-responsive').DataTable({
            dom: 'Bfrtip',
            buttons: [
                //    'copy', 'csv', 'excel', 'pdf', 'print',
                {
                    extend: 'copy',
                    text: 'copy',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'csv',
                    text: 'csv',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'excel',
                    text: 'excel',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'pdf',
                    text: 'pdf',
                    exportOptions: {
                        columns: [5, 3, 4, 7, 6],
                        modifier: {
                            selected: true
                        }
                    }
                },
                {
                    extend: 'print',
                    text: 'print',
                    exportOptions: {
                        modifier: {
                            selected: true
                        }
                    }
                },

            ],
            columnDefs: [{
                orderable: false,
                className: 'select-checkbox',
                targets: 0,
                checkboxes: {
                    selectRow: true
                }
            }],
            select: {
                style: 'multi',
                selector: 'td:first-child'
            },
            order: [[1, 'asc']]

        });
    });

//checkbox selection process

$("#checkAll").click(function () {//check and uncheck all function
    $('input:checkbox').not(this).prop('checked', this.checked);
});

//checkbox selection process ends

</script>

</div>
</body>
</html>

1 个答案:

答案 0 :(得分:0)

选中这些框还不够,还需要选择行:

$("#checkAll").click(function () {//check and uncheck all function
  $('input:checkbox').not(this).prop('checked', this.checked);
  table.rows().select(this.checked); // < add this
});

所有这些都在$(文件)。当然,或者你没有表var。