Question

在从数据库中加载超过4000行的页面时，浏览器（IE，Firefox和Chrome）冻结，直到呈现所有数据。此时，将显示数据表（来自jquery.dataTables.min.js库），并且浏览器将响应并且我的过滤器可以正常工作。

直接从数据库中获取值

是否可以避免浏览器进入“非响应”模式？

Answer 1

尝试对from django.contrib import admin class OrderAdmin(admin.ModelAdmin): list_display = ('id', 'name', 'product', 'email','is_valid','is_delivered', 'order_date') list_display_links = ('id', 'name',) list_editable = ('is_valid','is_delivered') search_fields = ('name', 'email', 'product') list_per_page = 25 def save_model(self, request, obj, form, change): # decrement logic here and then trigger save as below # you have access to the model through obj and form data through form # e.g.: obj.is_valid and form.changed_data are here super().save_model(request, obj, form, change) admin.site.register(Order, OrderAdmin)进行服务器端分页。

客户端
```
DataTables
```

控制器

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Id</th>
            <th>Title</th>
            <th>Sku</th>
        </tr>
    </thead>
</table>

@section Scripts{
    <link href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" rel="stylesheet" />

    <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap4.min.js "></script>


    <script type="text/javascript">
        $(document).ready(function () {
            $('#example').DataTable({
                "processing": true,
                "serverSide": true,
                "lengthMenu": [[2, 4, 8, -1], [2, 4, 8, "All"]],
                "ajax": {
                    url: "https://localhost:44376/api/product/products",
                    contentType: "application/json; charset=utf-8",
                },
                columns: [
                    {
                        data: "id",
                    },
                    {
                        data: "title"
                    },
                    {
                        data: "sku",
                    }
                ]
            });
        });
    </script>
}

模型

[HttpGet("Products")]
public ResponseVM AllProducts(RequestVM request)
{
    var count = _context.Products.Count();
    var data = _context.Products.Skip(request.Start).Take(request.Length).ToList();
    return new ResponseVM
    {
        Draw = request.Draw,
        RecordsTotal = count,
        RecordsFiltered = count,
        Data = data
    };
}

显示前10行，同时从数据表中加载更多4000行

1 个答案: