Question

我被bootstrapToggle困在了jquery数据表中

我的要求是- 1）我已向DataTable提供分页

2）列的数据之一（有效/无效）应表示为bootstrapToggle按钮。

3）在页面上更改，bootstrapToggle按钮应该在首页显示时正确显示。

4）在bootstrapToggle列中，我只希望其中一行处于活动状态。如果我使一个活动，其他应设置为不活动。我可以对第一页的部分要求进行部分排序，但是在第二页上并没有改变，依此类推...

5）我不应该将状态更改为“活动按钮无效”。相反，如果我将其他按钮设为“活动”，它应该会自动变为“不活动”

附加我的代码我的代码存在问题，在下一页上显示了小的切换按钮，并且状态更改仅在第1页上有效，而与其他人不兼容。

$(`#map_data_table`).DataTable({
                    scrollY: "350px",
                    scrollX: false,
                    "lengthMenu": [5, 10, 25, 50],
                    columnDefs: [
                        {
                            "orderable": false,
                            targets: [0],
                            "aDataSort": false,
                            "searchable": false,
                            "visible": false,
                        }],
                    scrollCollapse: true,
                    fixedColumns: true,
                    "dom": '<f<t>lip>',
                    initComplete: function () {
                        $(`#map_data_table_filter input`).detach().appendTo("#new-search-area");
                    },
                    rowCallback: function (row, data) {
                        $('input.activeToggle', row).bootstrapToggle();
                    }
                });

const changeMapStatus = function changeMapStatus(event,currentName) {
  if ($(event).prop('checked')) {
                $("input[type=hidden][name*='Active']").val(false); 
                 $('.activeToggle').prop('checked', false).change();
                $(event).parent().siblings("input").val(true);
            }

<table id="map_data_table" class="table table-striped table-bordered  nowrap" cellspacing="0" width="100%">
                    <thead>
                    <tr>
                        <th></th>
                        <th>
                            @Html.DisplayNameFor(model => Model.Maps[0].Code)
                        </th>                        
                        <th>
                            @Html.DisplayNameFor(model => Model.Maps[0].Active)
                        </th>
                    </tr>
                    </thead>
                    
                    <tbody>
                    @for (var i = 0; i < Model.Maps.Count(); i++)
                    {
                        <tr>
                            @Html.HiddenFor(model => Model.DataProviderId)
                            <td> @Html.HiddenFor(model => Model.Maps[i].Id)</td>
                            <td class="col-md-2">                             
                                    @Html.DisplayFor(model => Model.Maps[i].Code, new { @class = "form-control" })                               
                            </td>                            
                            <td class="col-md-1">
                                @Html.CheckBoxFor(model => Model.Maps[i].Active, new {@class = "form-control activeToggle disabled",  @disabled = "disabled", data_on = "Active", data_off = "Inactive", @onchange = "JsFunctions.changeMapStatus(this,this.id)" })
                                @Html.ValidationMessageFor(model => Model.Maps[i].Active)
                            </td>

                        </tr>
                    }
                    </tbody>
                    
                </table>

DataTable中的bootstraptoggle按钮-允许从整个表中仅选择一个按钮

0 个答案: