获取DataTables中多个选定行ID的数组

时间:2019-05-27 13:01:33

标签: jquery html asp.net datatables

我尝试通过datatables jquery插件中的复选框选择多行,以便将数据传递给另一种形式。

我正在做一些事情,但是我的代码只是返回当前数据表活动页面中的选定行。

这是我的表单,其中填充了来自jquery的数据:

   <div class="widget-footer">

      <button id="BtnClick" class="btn btn-sm btn-success" type="submit">
          صدور
      </button>
      @using (@Html.BeginForm("LineRegimeSave", "DietTherapy", FormMethod.Post, new { id = "hiddenForm" }))
      {
          <input type="hidden" name="BreakFast" value="" />
          <input type="hidden" name="Snake1" value="" />
          <input type="hidden" name="Lunch" value="" />
          <input type="hidden" name="Snake2" value="" />
          <input type="hidden" name="Snake3" value="" />
          <input type="hidden" name="Dinner" value="" />
          <input type="hidden" name="Snake4" value="" />
          <input type="hidden" name="AdviseText" value="@TempData["Advise"].ToString()" />
          <input type="hidden" name="docFooterId" value="@TempData["footerId"].ToString()" />
      }
  </div>

这是我的查询:

        var datasets = {};
        $("#BtnClick").click(function () {

           $.each(
                $("input[type=checkbox]"),
                function() {
                    var catName = $(this).attr('name');
                    datasets[catName] = {
                        label: catName,
                        data: []
                    };
                });

           $.each(
                $("input[type=checkbox]:checked"),
                function () {
                    var catName = $(this).attr('name');
                    datasets[catName].data.push($(this).val());
                });
            var data ={};
            $.each(
                datasets,
                function (item, dt) {
                    var name = item;
                    var value = dt['data'].join(",");
                    data[name] = value;
                }
            );

            $("#hiddenForm").autofill(data);
            $("#hiddenForm").submit();

您可以看到我的桌子:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" class="collapsed">
                <i class="fa fa-lg fa-angle-down pull-right"></i>
                <i class="fa fa-lg fa-angle-up pull-right"></i>
                وعده صبحانه
            </a>
        </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse" aria-expanded="false" style="height: 0;">
        <div class="panel-body no-padding">
                <table id="dt_basic" class="table table-striped table-bordered table-hover dataTable no-footer" role="grid" aria-describedby="datatable_col_reorder_info" style="width: 100%;" width="100%">
                    <thead>
                        <tr role="row">
                            <th data-hide="phone" class="sorting_asc" tabindex="0" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 31px;" aria-sort="ascending" aria-label="ID: activate to sort column descending">ردیف</th>
                            <th data-class="expand" class="expand sorting" tabindex="0" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 300px;" aria-label="Name: activate to sort column ascending">رژیم</th>
                            <th class="sorting" aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 50px;" aria-label="Phone: activate to sort column ascending">کالری</th>
                            <th aria-controls="datatable_col_reorder" rowspan="1" colspan="1" style="width: 20px;" aria-label="Phone: activate to sort column ascending">انتخاب</th>
                        </tr>
                    </thead>
                    <tbody>
                        @{
                            //string[] cal = new[] {breakfast, snake1, lunch, snake2, snake3, dinner, snake4};

                            if (Model.Any())
                            {
                                int index = 1;
                                var breakFast = Model.Where(a => a.Mealses.Any(b => b.MealsName == "BreakFast") && a.Calories.ToString() == @ViewBag.cal[0].ToString()).ToList();
                                foreach (var itDiet in breakFast)
                                {
                                    var rowCls = "odd";
                                    rowCls = @index / 2 == 0 ? "odd" : "even";
                                    <tr role="row" class="@rowCls">
                                        <td>@index</td>
                                        <td>@itDiet.Diet</td>
                                        <td>@itDiet.Calories</td>
                                        <td class="smart-form">
                                            <label class="checkbox">
                                                <input name="BreakFast" checked="checked" type="checkbox" value="@itDiet.Id">
                                                <i></i>
                                            </label>
                                        </td>
                                    </tr>
                                    index++;
                                }
                                index = 1;

                            }

                        }


                    </tbody>
                </table>
        </div>
    </div>
</div>

当我在Visual Studio中检查发布方法时,可以看到我刚刚收到选中的活动页带有复选框的行。您能帮我改善我的jquery代码吗?

更新 如果您想知道数据表源在哪里: DataTables 而且您可能需要将此脚本添加到页面

    <script src="~/Scripts/plugin/datatables/jquery.dataTables.min.js"></script>
    <script src="~/Scripts/plugin/datatables/dataTables.colVis.min.js"></script>
    <script src="~/Scripts/plugin/datatables/dataTables.tableTools.min.js"></script>
    <script src="~/Scripts/plugin/datatables/dataTables.bootstrap.min.js"></script>
    <script src="~/Scripts/plugin/datatable-responsive/datatables.responsive.min.js"></script>
    <script src="~/Scripts/jquery.formautofill.js"></script>

0 个答案:

没有答案