首页 > 解决方案 > 如何在 1 个表中显示 2 个类 JavaScript id

问题描述

我目前被困在如何在 1 个表中显示 2 个 JavaScript ID,我想在表中显示“显示列表 5、10、50”功能,并在同一个表中显示“导出 csv、pdf 等”功能,理想情况下1 行。

显示列表视图(数据表) 在此处输入图像描述

导出视图(数据表导出) 在此处输入图像描述

我的代码如下

<div class="row">
    <table class="stripe hover multiple-select-row data-table nowrap">
        <thead>
            <tr>
                <th class="table-plus datatable-nosort">Name</th>
                <th>A</th>
                <th>B</th>
            </tr>
        </thead>
    </table>
</div>

$('document').ready(function(){
            $('.data-table').DataTable({
                scrollCollapse: true,
                autoWidth: false,
                responsive: true,
                columnDefs: [{
                    targets: "datatable-nosort",
                    orderable: false,
                }],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "language": {
                    "info": "_START_-_END_ of _TOTAL_ entries",
                    searchPlaceholder: "Search"
                },
            });
            $('.data-table-export').DataTable({
                scrollCollapse: true,
                autoWidth: false,
                responsive: true,
                columnDefs: [{
                    targets: "datatable-nosort",
                    orderable: false,
                }],
                "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                "language": {
                    "info": "_START_-_END_ of _TOTAL_ entries",
                    searchPlaceholder: "Search"
                },
                dom: 'Bfrtip',
                buttons: [
                'copy', 'csv', 'pdf', 'print'
                ]
            });
            var table = $('.select-row').DataTable();
            $('.select-row tbody').on('click', 'tr', function () {
                if ($(this).hasClass('selected')) {
                    $(this).removeClass('selected');
                }
                else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
            var multipletable = $('.multiple-select-row').DataTable();
            $('.multiple-select-row tbody').on('click', 'tr', function () {
                $(this).toggleClass('selected');
            });
        });

标签: javascriptjqueryhtmldatatabledatatables

解决方案


推荐阅读