如何将 DataTables 脚本与已填充的表一起使用

Question

我正在开发一个 MVC 项目。所以这是我的问题，我已经用我的模型中的数据填充了我的表格主体。但我知道我想将 dataTables 集成到更灵敏、更有用的表格设计中， 同时，我想继续使用 model.field 来获取我的数据中的特定引用 要恢复，我想集成 jquery 数据表而不必插入数据（这在表中已经存在） 这是我已经完成的代码。知道怎么做吗？

@model IEnumerable<WebApplication11.Models.MCD>
@using WebApplication11.Models
@{
    ViewBag.Title = "Index";
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
}

<table class="table table-striped table-bordered table-hover table-checkable order-column sortable" id="sample_1">

    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.OUTRET)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.GLOBALRET)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SETT_DATE)
            </th>


        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {

            <tr class="odd gradeX">
                <td>
                    @Html.DisplayFor(modelItem => item.OUTRET)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.GLOBALRET)
                </td>

                <td>
                    @Html.DisplayFor(modelItem => item.SETT_DATE)
                </td>



            </tr>

        }
    </tbody>
</table>

}

@section Scripts{
    <script src="~/Scripts/jquery-3.3.1.js"></script>
    .
    .
    .

    <script type="text/javascript">
        $(document).ready(function () {
            $.ajax({

                url: "Index",
                dataType: "json",
                contentType: "application/json; chartset=utf-8",
                success: function (result) {
                    $('#sample_1').DataTable({
                        dom: 'Bfrtip',
                        data: result,
                        buttons: [{
                            extend: 'collection',
                            text: 'Export',
                            buttons:

                                [{ extend: 'copy', className: 'btn-primary' },
                                { extend: 'excel', className: 'btn-primary' },
                                { extend: 'csv', className: 'btn-primary' },
                                { extend: 'pdf', className: 'btn-primary' },
                                { extend: 'print', className: 'btn-primary' }
                                ]

                        }],
                    })

                },
                error: function () {
                    alert("Error loading data! Please try again.");

                },


            });
        }
        )
    </script>
}

Answer 1

如果您有一个 HTML 表格，您可以在页面加载后在其上初始化 DataTables

$(document).ready(function() { 
    // make sure the document has finished loading, or use <script> tags at the bottom of the HTML
    $('#tableId').DataTable();
});

您可以按常规方式设置选项。如果您重新加载表，则需要重新初始化 DataTables，但如果您的页面仍然重新加载，这将不是问题。