django之Layui界面点击弹出个对话框并请求逻辑生成分页的动态表格

1、首先，界面上有个按钮触发操作：

<button type="button" class="layui-btn layui-btn-normal" id="user_list">用户列表</button>

2、点击这个按钮触发之后，会弹出一个对话框并请求view，从数据库中得到数据并产生动态表格，其中script代码如下：

<script>
    layui.use(['table'],
        function () {
            var table = layui.table

            $("#user_list").click(function(){
                layer.open({
                        type: 1,
                        title: '用户信息',
                        area: ['800px', '600px'], //宽高
                        content: '<div class="layui-card-header"><div class="layui-form-text">用户信息列表</div>' +
                        '</div><div class="layui-form-item">' +
                        '<table id="user_table" lay-filter="user_table"></table></div>',
                        success: function () {
                            table.render({
                                elem: '#user_table',
                                id: 'user_table',
                                height: 480,
                                method: 'post', //接口http请求类型，默认：get
                                url: '{% url 'user:user_list' %}',
                                request: {
                                    pageName: 'page', //页码的参数名称，默认：page
                                    limitName: 'limit', //每页数据量的参数名，默认：limit
                                },
                                response: {
                                    statusName: 'code', //规定数据状态的字段名称，默认：code
                                    statusCode: 0, //规定成功的状态码，默认：0
                                    msgName: 'msg', //规定状态信息的字段名称，默认：msg
                                    countName: 'count', //规定数据总数的字段名称，默认：count
                                    dataName: 'data', //规定数据列表的字段名称，默认：data
                                },
                                page: true, //是否分页
                                limit: 10, //每页显示的条数
                                limits: [10, 20, 30], //每页条数的选择项，默认：[10,20,30,40,50,60,70,80,90]。
                                cols: [
                                    [
                                        {
                                            field: 'username', //字段名
                                            title: '用户名', //标题
                                            width: 150,
                                            sort: true, //是否允许排序 默认：false
                                            fixed: 'left' //固定列
                                        }, {
                                        field: 'sex', //字段名
                                        title: '性别', //标题
                                        width: 100,
                                        sort: true //是否允许排序 默认：false
                                        //fixed: 'left' //固定列
                                    }, {
                                        field: 'age', //字段名
                                        title: '年龄', //标题
                                        width: 100,
                                        sort: true //是否允许排序 默认：false
                                        //fixed: 'left' //固定列
                                    }, {
                                        field: 'mobile', //字段名
                                        title: '手机', //标题
                                        width: 100,
                                        sort: true //是否允许排序 默认：false
                                        //fixed: 'left' //固定列
                                    }, {
                                        field: 'address', //字段名
                                        title: '地址', //标题
                                        width: 150,
                                        sort: true //是否允许排序 默认：false
                                        //fixed: 'left' //固定列
                                    },{
                                        field: '', //字段名
                                        title: '操作', //标题
                                        toolbar: '#bar'
                                    }
                                    ]
                                ],
                            });
                        },
                        cancel: function () {
                            layer.closeAll();
                        }
                    })
            });
        });

</script>

<script type="text/html" id="bar">
    <button class="layui-btn layui-btn-normal">查看</button>
    <button class="layui-btn layui-btn-normal">编辑</button>
</script>

3、接着，所请求的view的方法，即为上面定义的url属性，{% url 'user:user_list' %}，其中url配置，以及逻辑实现代码分别如下：

from django.urls import path


urlpatterns = [
    # 查询用户列表
    path('user_list/', UserQuery.as_view(), name="user_list"),
]

from apps.user.models.user_model import UserInfo
from django.http import JsonResponse
from django.views.decorators.csrf import csrf_exempt


class UserQuery(View):
    """
    用户信息查询
    """
    def post(self, request):
        user_list = UserInfo.objects.objects.get_queryset().order_by('id')
        data = dict()
        data_items = []
        for item in user_list :
            user_dict = {"username": item.username, "age": item.age, "sex": item.sex, "mobile": item.mobile,
                          "address": item.address}
            data_items.append(user_dict )
        data.__setitem__("data", data_items)
        data.__setitem__("code", 0)
        data.__setitem__("msg", "")
        data.__setitem__("count", len(field_list))
        return JsonResponse(data)

    @csrf_exempt
    def dispatch(self, *args, **kwargs):
        return super(UserQuery, self).dispatch(*args, **kwargs)

注：

（1）、通过查询UserInfo model底下的数据，然后分别循环这个列表，把动态表格所需要显示的值，填充到一个字典底下，并追加进列表当中，最后再统一构成一个字典data，把列表数据，状态码，返回信息，数量返回回去。

（2）其中通过ajax请求时，可能会有csrf跨域的限制，因为我们没有构造一个表单，并在表单底下加个 {% csrf_token %} ，导致请求不过去，所以要加个@csrf_exempt注解方式来解决。