使用数据表为每个按钮添加计数

Question

我正在使用数据表。目前，它按预期工作，但是我希望添加和删除按钮具有某种计数。例如 AddButton_0 我将如何使用数据表来做到这一点？

var url = "/ClientSetup/GetCatalogueContracts";
        var contractsTable = $('#catalogueContractsTable').DataTable({
            sAjaxSource: url,
            columns: [
                { "data": "ID" },
                { "data": "Selected"},
                { "data": "Name"},
                { "data": "ContractType"},
                { "data": "StartDate"},
                { "data": "TerminationDate"},
                { "button": "Action" }
                ],
            serverSide: true,
            sDom: 't<"dt-panelfooter clearfix"ip>',
            pageLength: pageSize,
            bSort: false,
            bLengthChange: false,
            bSearch: true,
            paging: true,
            searching: true,
            order: [[2, "asc"]],
            language: {
                emptyTable: "No contracts found.",
                zeroRecords: "No contracts found.",
                info: "_START_ to _END_ of _TOTAL_",
                paginate: {
                    first: "First",
                    previous: "Previous",
                    next: "Next",
                    last: "Last"
                }
            },
            columnDefs: [
                {
                    targets: [0],
                    visible: false
                },
                {
                    targets: [1],
                    visible: false
                },
                {
                    targets: [2]
                },
                {
                    targets: [3],
                    sClass: "hidden-xs hidden-sm contractType"
                },
                {
                    targets: [4],
                    sClass: "hidden-xs fromDate"
                },
                {
                    targets: [5],
                    sClass: "hidden-xs terminationDate"
                },
                {
                    data: null,
                    targets: [6],
                    sClass: "updateTableRow text-center",
                    render: function ( data, type, full, meta )
                    {
                        var id = data["ID"];
                        return `<button class=\"btn btn-success br2 btn-xs fs12 table-btn button-selector-${id}\" id=\"AddContractBtn\">Add</button>`;
                    }
                }
            ],
            drawCallback: function( settings ) {
                disableInvalidContracts();
            },
            autoWidth: false
        });



// make sure already selected rows cannot be added again.
            var excludeIds = getExcludeIds();
            $.each(excludeIds, function() {
                var button = $("#AddContractBtn.button-selector-" + this);
                button.addClass("disabled");
                button.prop('disabled', true);
            });

        }

@* Adding and Removing Data from both Tables *@
        contractsTable.on('click', '#AddContractBtn', function () {
            var $row = $(this).closest("tr");

            @*Track Contract IDs that have been removed from the unselected table*@
            var value = $('#exclude-ids').val();
            var ids = getExcludeIds();
            ids.push($row.attr('id'));
            $('#exclude-ids').val(JSON.stringify(ids));

            var addRow = contractsTable.row($row);
            var data = addRow.data();
            data.Selected = true;
            selectedContractsTable.row.add(addRow.data()).draw( false );

            setSelectedInputForContract('true', data.ID);
            disableInvalidContracts();
        });

        selectedContractsTable.on('click', '#RemoveContractBtn', function () {
            var $row = $(this).closest('tr');
            var addRow = selectedContractsTable.row($row);
            var data = addRow.data();
            data.Selected = false;
            addRow.data(data);
            addRow.remove().draw();

            @* Remove the Contract ID from the exclide ids hidden input*@
            var value = $('#exclude-ids').val();
            var ids = getExcludeIds();                
            ids = ids.filter(i => i !== $row.attr('id'));
            $('#exclude-ids').val(JSON.stringify(ids));

            setSelectedInputForContract('false', data.ID);
            disableInvalidContracts();
        });

我正在寻找一种可以为每个按钮添加计数的方法，例如 `AddButton_0 我不确定是否可以选择在 DataTables 上使用计数。或者我是否可以使用 JQuery？

Answer 1

试试这个：你可以拥有全局变量，并为每次访问按钮创建功能增加它。可以使用 jquery 中的属性选择器开始创建添加和删除按钮的单击处理程序。

见下面的代码

var count = 0;
var url = "/ClientSetup/GetCatalogueContracts";
        var contractsTable = $('#catalogueContractsTable').DataTable({
            sAjaxSource: url,
            columns: [
                { "data": "ID" },
                { "data": "Selected"},
                { "data": "Name"},
                { "data": "ContractType"},
                { "data": "StartDate"},
                { "data": "TerminationDate"},
                { "button": "Action" }
                ],
            serverSide: true,
            sDom: 't<"dt-panelfooter clearfix"ip>',
            pageLength: pageSize,
            bSort: false,
            bLengthChange: false,
            bSearch: true,
            paging: true,
            searching: true,
            order: [[2, "asc"]],
            language: {
                emptyTable: "No contracts found.",
                zeroRecords: "No contracts found.",
                info: "_START_ to _END_ of _TOTAL_",
                paginate: {
                    first: "First",
                    previous: "Previous",
                    next: "Next",
                    last: "Last"
                }
            },
            columnDefs: [
                {
                    targets: [0],
                    visible: false
                },
                {
                    targets: [1],
                    visible: false
                },
                {
                    targets: [2]
                },
                {
                    targets: [3],
                    sClass: "hidden-xs hidden-sm contractType"
                },
                {
                    targets: [4],
                    sClass: "hidden-xs fromDate"
                },
                {
                    targets: [5],
                    sClass: "hidden-xs terminationDate"
                },
                {
                    data: null,
                    targets: [6],
                    sClass: "updateTableRow text-center",
                    render: function ( data, type, full, meta )
                    {
                        var button = `<button class=\"btn btn-success br2 btn-xs fs12 table-btn button-selector-${id}\" id=\"AddContractBtn' + count + '\">Add</button>`;
                        count++;  // increment count
                        var id = data["ID"];
                        return button;
                    }
                }
            ],
            drawCallback: function( settings ) {
                disableInvalidContracts();
            },
            autoWidth: false
        });



// make sure already selected rows cannot be added again.
            var excludeIds = getExcludeIds();
            $.each(excludeIds, function() {
                var button = $("#AddContractBtn.button-selector-" + this);
                button.addClass("disabled");
                button.prop('disabled', true);
            });

        }

@* Adding and Removing Data from both Tables *@
        contractsTable.on('click', 'button[id^=AddContractBtn]', function () {
            var $row = $(this).closest("tr");

            @*Track Contract IDs that have been removed from the unselected table*@
            var value = $('#exclude-ids').val();
            var ids = getExcludeIds();
            ids.push($row.attr('id'));
            $('#exclude-ids').val(JSON.stringify(ids));

            var addRow = contractsTable.row($row);
            var data = addRow.data();
            data.Selected = true;
            selectedContractsTable.row.add(addRow.data()).draw( false );

            setSelectedInputForContract('true', data.ID);
            disableInvalidContracts();
        });

        selectedContractsTable.on('click', 'button[id^=RemoveContractBtn]', function () {
            var $row = $(this).closest('tr');
            var addRow = selectedContractsTable.row($row);
            var data = addRow.data();
            data.Selected = false;
            addRow.data(data);
            addRow.remove().draw();

            @* Remove the Contract ID from the exclide ids hidden input*@
            var value = $('#exclude-ids').val();
            var ids = getExcludeIds();                
            ids = ids.filter(i => i !== $row.attr('id'));
            $('#exclude-ids').val(JSON.stringify(ids));

            setSelectedInputForContract('false', data.ID);
            disableInvalidContracts();
        });