кнопка начальной загрузки в DataTable - позволяет выбрать только одну кнопку из всей таблицы - PullRequest
Новая
       31

кнопка начальной загрузки в DataTable - позволяет выбрать только одну кнопку из всей таблицы

0 голосов
/ 20 мая 2019

Я застрял в случае с jquery, доступным для данных с bootstrapToggle

Мое требование: 1) Я предоставил Paging to DataTable

2) Одна из данных столбца (Active / InActive)должна быть представлена ​​в виде кнопки bootstrapToggle.

3) При изменении страницы кнопка bootstrapToggle должна отображаться правильно, как она отображается на первой странице.

4) Из столбца bootstrapToggle мне нужна только одна строкадолжен быть активным.Если я сделаю один активный, другие должны установить InActive.Я могу частично отсортировать это требование для первой страницы, но оно не будет изменено на странице 2 и так далее ...

5) Я не смог изменить состояние «Неактивно для активной кнопки».Скорее, он автоматически получит InActive, если я сделаю другую кнопку активной.

Прикрепление моего кода Проблема с моим кодом заключается в том, что на следующей странице отображаются маленькие кнопки переключения и изменение состояния работает только на странице 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>
...