如何在 ASP.NET Core MVC 中添加分页，在 AJAX 调用中动态创建的表上

Question

cshtml:

<!--Grid view details-->
<div class="divGrid" id="divGridSales" style="display:none;">
    <div class="table-responsive" id="ItemTableDiv" style="float: none;">
        <div class="table-responsive">
            <table class="table tblView" id="tblViewPartDetails">
                <thead id="itemTblHeaderColumns">
                </thead>
                <tbody id="ItemConfigGrid">
                </tbody>
            </table>
        </div>
    </div>
</div>

在下拉更改事件中，我正在动态创建表格，如下所示，

$("#ddlCountry").change(function () {
    $("#divGridSales").css({ display: "none" });

    var id = {};
    id.pLobID = $('#ddlLOB').val();
    id.pCountryID = $('#ddlCountry').val();

    if (id.pCountryID > 0) {
        $.ajax({
            type: "GET",
            url: "../Controller/Method",
            data: id,
            success: function (data) {
                if (data != null) {
                    debugger;
                    if (data != null && data.length > 0) {
                        var tableHeader = $('#itemTblHeaderColumns')
                        $("#itemTblHeaderColumns tr").remove();
                        var trHeader = $('<tr /> ').appendTo(tableHeader);
                        /////This is used to bind columns
                        trHeader.append('<th class="trheaderTable" style="width: 12%;"> Part Number </th>');//PartNumber
                        trHeader.append('<th class="trheaderTable" style="width: 5%;"> Action </th>');//Action
                        ///This is used to bind rows
                        var tbody = $('#ItemConfigGrid');
                        $("#ItemConfigGrid tr").remove();
                        for (var iRow = 0; iRow < data.length; iRow++) {
                            var tr = $('<tr /> ').appendTo(tbody);
                            tr.append('<td>' + data[iRow].partNumber + '</td>');
                            tr.append('<td><a href="#" id="hlinkView" class="ti-eye" data-toggle="modal" data-target="#exampleModal" onclick="getPartDetailsByPartNumber(' + data[iRow].partNumber + ')"></a></td>');
                        }
                        $('#tblViewPartDetails').DataTable();
                        $("#divGridSales").css({ display: "block" });
                   }
                    else {
                        alert('Something went to wrong!');
                    }
                }
            }
        });
    }
});

在 tblViewPartDetails 桌子上我必须添加分页

注意：我试过DataTable插件，第一次按要求显示数据。但是下一次，当下拉列表更改时，所有数据都会显示（分页不起作用）。

Answer 1

这是一个完整的工作演示，您可以关注：

型号：

public class Country
{
    public int pCountryID { get; set; }
    public int pLobID { get; set; }
}

查看：

<select id="ddlCountry">
    <option value="0">Select a Value</option>
    <option value="1">Shanghai</option>
    <option value="2">Nanjing</option>
    <option value="3">Wuhan</option>
</select>
<div class="divGrid" id="divGridSales" style="display:none;">
    <div class="table-responsive" id="ItemTableDiv" style="float: none;">
        <div class="table-responsive">
            <table class="table tblView" id="tblViewPartDetails">
                <thead>
                   
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>

JS：

@section Scripts
{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
    <script>
        $("#ddlCountry").change(function () {
            $("#divGridSales").css({ display: "none" });
            var id = {};
            id.pLobID = $('#ddlLOB').val();
            id.pCountryID = $('#ddlCountry').val();
            var columns = [];
            if (id.pCountryID > 0) {
                $.ajax({
                    type: "GET",
                    url: "/Home/Test",
                    data: id,
                    success: function (data) {
                        console.log(data);
                        columnNames = Object.keys(data[0]);
                        console.log(columnNames);
                        for (var i in columnNames) {
                            columns.push({
                                data: columnNames[i],
                                title: columnNames[i]
                            });
                        }
                        $("#divGridSales").css({ display: "block" });
                        $('#tblViewPartDetails').DataTable({
                            "processing": true, // for show progress bar
                            "serverSide": false, // for process server side
                            "filter": true, // this is for disable filter (search box)
                            "orderMulti": false, // for disable multiple column at once
                            "bDestroy": true,   //for reinitialize the datatable
                            "data": data,
                            "columns": columns
                        });
                    }
                });
            }
        });
    </script>
}

控制器：

public class HomeController : Controller
{
    List<Country> countries = new List<Country>()
    {
        new Country (){pLobID=1,pCountryID=1},
        //more hard coded data...      
        new Country (){pLobID=313,pCountryID=3},       
    };       
    [HttpGet]
    public IActionResult Index()
    {
        return View();
    }
    public IActionResult Test(Country model) 
    {
        var data = countries.Where(a => a.pCountryID == model.pCountryID)
                            .ToList();
        return Json(data);
    }
}

结果：

更新：

您需要在columns 中添加一个新项目才能将按钮放在此列中。然后记得在Datatable中使用columnDefs方法添加这个按钮：

<script>
    $("#ddlCountry").change(function () {
        $("#divGridSales").css({ display: "none" });
        var id = {};
        id.pLobID = $('#ddlLOB').val();
        id.pCountryID = $('#ddlCountry').val();
        var columns = [];
        if (id.pCountryID > 0) {
            $.ajax({
                type: "GET",
                url: "/Home/Test",
                data: id,
                success: function (data) {
                    columnNames = Object.keys(data[0]);
                    console.log(columnNames);
                    for (var i in columnNames) {
                        columns.push({
                            data: columnNames[i],
                            title: columnNames[i]
                        });
                    }
                    //add this...
                    columns.push({
                        data: "Operation",
                        title: "Operation"
                    })
                    $("#divGridSales").css({ display: "block" });
                    $('#tblViewPartDetails').DataTable({
                        "processing": true, // for show progress bar
                        "serverSide": false, // for process server side
                        "filter": true, // this is for disable filter (search box)
                        "orderMulti": false, // for disable multiple column at once
                        "bDestroy": true,   //for reinitialize the datatable
                        "data": data,
                        "columns": columns,
                        "columnDefs": [
                            {
                                // The `data` parameter refers to the data for the cell.
                                // The `rows`argument is an object representing all the data for the current row.
                                "render": function (data, type, row) {
                                    return "<button class='btn btn-danger btn-delete' onclick='Delete(" + row.pLobID + ")'>Delete</button>||<button class='btn btn-danger btn-delete' onclick='Edit(" + row.pLobID + ")'>Edit</button>";
                                },
                                "targets": -1  // -1 is the last column, 0 the first, 1 the second, etc.
                            }
                        ]
                        
                    });
                }
            });
        }
    });
    function Delete(data) {
        alert(data);
    };
    function Edit(data) {
        alert(data);
    }
</script>

如果要隐藏列，可以在columnDefs中添加以下代码：

"columnDefs": [
    {
        // The `data` parameter refers to the data for the cell.
        // The `rows`argument is an object representing all the data for the current row.
        "render": function (data, type, row) {
            return "<button class='btn btn-danger btn-delete' onclick='Delete(" + row.pLobID + ")'>Delete</button>||<button class='btn btn-danger btn-delete' onclick='Edit(" + row.pLobID + ")'>Edit</button>";
        },
        "targets": -1  // -1 is the last column, 0 the first, 1 the second, etc.
    },

      //add here.....
    {
        "targets": [0],//0 the first, 1 the second, etc.
        "visible": false
    }
]