javascript - 如何通过dataTable中的复选框或单选按钮选择记录

Question

我不确定这是否可以做到。我想要实现的是选择在dataTable. 当我加载页面时，它将在服务器端呈现所有记录的列表。就像dataTables我想添加一组复选框或单选按钮中的搜索一样，选择后它将填充满足该条件的记录。就我而言，它是类。

我相信在控制器方面我已经弄清楚了。在输入端，我需要知道如何将其传递给控制器​​。我以前有一个这样做过的表格，但是由于记录的数量，出于速度的目的，我将其更改foreach为ajax json结果。

这是我的控制器：

    public ActionResult  GetGrid()
    {
        // Server Side Parameters
        int start = Convert.ToInt32(Request["start"]);
        int length = Convert.ToInt32(Request["length"]);
        string searchValue = Request["search[value]"];
        string searchBy = Request["searchBy[value]"];
        string sortColumnName = Request["column[" + Request["order[0][column]"] + "][name]"];
        string sortDirection = Request["order[0][dir]"];

        List<PartSearchView> prodList = new List<PartSearchView>();
        using (GeneralEntities db = new GeneralEntities())
        {
            prodList = db.PartSearchView.ToList();
            int totalRows = prodList.Count;
            if (!string.IsNullOrEmpty(searchValue))
            {
                if(searchBy != null)
                {
                    if (searchBy == "ELEC")
                    {
                        prodList = prodList.Where(x => x.Status == true).Where(x => x.VendorId != null).Where(x => x.PartNumber.StartsWith("E")).ToList();
                    }
                }
                else
                {
                    prodList = prodList.Where(x => x.PartNumber != null && x.PartNumber.ToLower().Contains(searchValue.ToLower())).ToList();
                }
               

                
            }

            int totalRowsAfterFilteing = prodList.Count;
            // Sorting
            prodList = prodList.OrderBy(sortColumnName + " " + sortDirection).ToList<PartSearchView>();

            prodList = prodList.Skip(start).Take(length).ToList();

            return Json(new { data = prodList, draw = Request["draw"], recordsTotal = totalRows, recordsFiltered = totalRowsAfterFilteing }, JsonRequestBehavior.AllowGet);
        }

    }

我不确定将收音机或复选框放在哪里。搜索字段会自动填充。我目前有它们的形式。如下所示。

<div class="input-group custom-search-form">
    @using (Html.BeginForm())
    {
       <b>Search By:</b>
       @Html.RadioButton("searchBy", "ELEC", new { id = 1, @value = "ELEC"})<text>&nbsp;Electrical &nbsp;</text>                                   
       @Html.RadioButton("searchBy", "MACH")<text>&nbsp;Machined Part &nbsp;</text>
       @Html.RadioButton("searchBy", "PNEU")<text>&nbsp;Pneumatic Part &nbsp;</text>
       @Html.RadioButton("searchBy", "PR")<text>&nbsp;Misc Part &nbsp;</text>
       @Html.RadioButton("searchBy", "ASSY")<text>&nbsp;Assembly Part &nbsp;</text>
       @Html.RadioButton("searchBy", "PRL")<text>&nbsp;Table Tops &nbsp;</text>

       <div class="btn-group">
         <button class="btn btn-primary" type="submit">
             <i class="fa fa-search"></i> Search
         </button>
       </div>
    }
    </div>

第一个我添加了一个值和一个 ID。考虑过使用 agetElementById但不知道如何将它作为参数或数据传递给 ajax 调用。

这是我的 JavaScript 代码：

 var ControlerNameParts = "@Url.Content("~/Parts")";
$(document).ready(function () {     
    //debugger;
    
    $("#PartSearchTable").dataTable({
        "serverSide": true,
        "ajax": {
            "url":  "/Parts/GetGrid/{searchBy == ELEC}",
            "type": "GET",
            "datatype": "JSON",
        },

        @*"sAjaxSource":  "@Url.Content("~/Parts/GetGrid")",*@
        "responsive": true,
        "bRetrieve": true,
        "bProcessing": true,
        "deferRender": true,
        "dom": 'lBfrtip',
        "order": [0, "PartNumber"],
        "language": {
            "processing": "processing...Please wait"
        },
        "buttons": [
            { extend: 'copyHtml5', exportOptions: { columns: ':visible' } }
            , { extend: 'excelHtml5', exportOptions: { columns: ':visible' } }
            , { extend: 'csvHtml5', exportOptions: { columns: ':visible' } }
            , { extend: 'pdfHtml5', exportOptions: { columns: ':visible' } }
            , { extend: 'print', exportOptions: { columns: ':visible' } }
            , 'colvis'
        ],
        columnDefs: [{ orderable: false, targets: [1, 2, 3, 4, 5] }],

        "aoColumns": [
            { "data": "PartNumber", "name": "PartNumber" },
            {
                "data": "PartImage", "aTargets": [0],
                "render": function (data) {
                    if (data === null) return '<img src=Content/Images/Parts/NoImage.png style="width:50px;" />';
                    return '<img src=Content/Images/Parts/' + data + ' class="zoom" style="width:50px;" />';
                }
            },
            { "data": "Description", "name": "Description" },
            {
                "data": "HasUpgrade", "aTargets": [0],
                "render": function (data) {
                    if (data === true) {
                        return '<b style="color:green;">Yes</b>';
                    } else {
                        return '<b style="color:red;">No</b>';
                    }
                }
            },
            {
                "data": "IsUpgrade", "aTargets": [0],
                "render": function (data) {
                    if (data === true) {
                        return '<b style="color:green;">Yes</b>';
                    } else {
                        return '<b style="color:red;">No</b>';
                    }
                }
            },
            {
                "mRender": function (oObj, type, full) {
                    var button = '<div>'
                    button += '<div class="btn-group">';
                    button += '<a class="btn btn-warning btn-sm" href="' + ControlerNameParts + "/Details/" + full.Material + '" data-ajax-update="#SkEdit" data-ajax-success="openModalDialog(\'SkEdit\', \'Edit\')" data-ajax-mode="replace" data-ajax-method="GET" data-ajax-failure="clearModalDialog(\'SkEdit\');alert(\'Ajax call failed\')" data-ajax-begin="prepareModalDialog(\'SkEdit\')" data-ajax="true">Details</a>&nbsp;';
                    button += '</div></div>';
                    return button;
                }
            },

        ],


    });
});

谢谢你的帮助！

标签： javascriptasp.net-mvc