在adminlte中使用datatable

基本使用

• 引入文件

<link rel="stylesheet" href="{% static 'adminlte/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css' %}">
<script src="{% static 'adminlte/plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables-responsive/js/dataTables.responsive.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables-buttons/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'adminlte/plugins/datatables-buttons/js/buttons.bootstrap4.min.js' %}"></script>

• 基本js

$('#usertable').DataTable({
        "ajax": "{% url 'manager:userlist' %}",
        "columns": [
            {"data": "username"},
            {"data": "create_time"},
            {"data": "superuser"},
            {"data": "passwd_expire_time"},
            {"data": "button"},
        ],
        language: {//自定义语言提示
            "processing": "处理中...",
            "lengthMenu": "显示 _MENU_ 条用户数据",
            "zeroRecords": "没有找到相应的结果",
            "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
            "infoEmpty": "第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "url": "",
            "thousands": "'",
            "emptyTable": "表中数据为空",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
                "first": "首页",
                "previous": "上页",
                "next": "下页",
                "last": "末页"
            }
        },
        // "stateSave": true,
        // "bAutoWidth": true,
        // "scrollX": "true",
        // "scrollY": "600px",
        // "scrollCollapse": true,
        "sDom": "<'row'<'col-md-6'<'#toolbar'>><'col-md-6'f>>" +  //设置表格最上面内容，可以在这里添加按钮等其他设置
"t" + //设置tables
"<'row'<'col-md-5 sm-center'li><'col-md-7 text-right sm-center'p>>",//设置表格最下面显示内容
    });
    $("#toolbar").append('<a href="{% url "manager:usercreate" %}"><button type="button" class="btn btn-primary"><i class="fa fa-plus-square"></i>&nbsp&nbsp新建用户</button></a>')

• html

<table id="eventtable" class="table table-bordered table-striped  display hover">
    <thead>
        <tr>
            <th></th>
            <th>标题</th>
            <th>完成时间</th>
            <th>事件等级</th>
            <th>工作量</th>
            <th>标签</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
    </thead>
</table>

后端分页

html不变

• js

var table = $('#eventtable').DataTable({
        "processing":true,
        "serverSide":true,  // 服务器分页
        "stateSave": true, //状态保持
        "ajax": "{% url 'event:eventlist' %}",
        "autoWidth":true,////不开启自动宽度，用bootstrap的自适应去调整
        "lengthMenu": [10,50, 100],//表格行数选择框内数目 显示2条,4条,20条,50条
        "displayLength": 10,//默认的显示行数 (也就是每页显示几条数据)
        "info":false,
        "columns": [
            {
                "class":'details-control',
                "orderable": true,
                "data": null,
                "defaultContent": '',
            }, 
            {"data": "event_title"},
            {"data": "event_deadline"},
            {"data": "event_level"},
            {"data": "event_workload"},
            {"data": "event_label"},
            {"data": "event_status"},
            {"data": "button"},
        ],
        "order": [[2, 'asc']],
        "language": {//自定义语言提示
            "processing": "处理中...",
            "lengthMenu": "显示 _MENU_ 项结果",
            "zeroRecords": "没有找到相应的结果",
            "info": "第 _START_ 至 _END_ 行，共 _TOTAL_ 行",
            "infoEmpty": "第 0 至 0 项结果，共 0 项",
            "infoFiltered": "(由 _MAX_ 项结果过滤)",
            "infoPostFix": "",
            "url": "",
            "thousands": "'",
            "emptyTable": "表中数据为空",
            "loadingRecords": "载入中...",
            "infoThousands": ",",
            "paginate": {
                "first": "首页",
                "previous": "上页",
                "next": "下页",
                "last": "末页"
            }
        },
        "sDom": "<'row'<'col-md-6'<'#toolbar'>><'col-md-6'f>>" +  //设置表格最上面内容，可以在这里添加按钮等其他设置
        "t" + //设置tables
        "<'row'<'col-md-5 sm-center'li><'col-md-7 text-right sm-center'p>>"
    } );
    $("#toolbar").append('<a href="{% url "event:eventedit" %}"><button type="button" class="btn btn-primary"><i class="fa fa-plus-square"></i>&nbsp&nbsp新建代办</button></a>')

• django

_query_data = request.GET
# 获取开始值
start_index = int(_query_data.get("start",0))
# 获取列表长度
search_length = int(_query_data.get("length",10))
# 算出列表区间
end_index = start_index + search_length
# 搜索，前端点搜索，search[value]有数据，根据这个数据去搜索
if _query_data.get('search[value]'):
    search_str =  _query_data.get('search[value]')
    # 搜索有意义的段

    EventInfo = EventDB.objects.filter(Q(event_title__icontains=search_str) | Q(event_level__icontains=search_str) | Q(event_detail__icontains=search_str) | Q(event_label__icontains=search_str))
else:    
    # 没搜索就查全部
    EventInfo = EventDB.objects.all()
# 获取排序的列，这里循环了10次，可以根据自己的列数进行调整
order_args = []
for i in range(0,10):
    order_column='order[%d][column]' % i
    if _query_data.get(order_column):   
        order_col = _query_data.get(f"columns[{_query_data.get(order_column)}][data]")
        order_args.append(order_col)
    if _query_data.get('order[%d][dir]' % i) == "asc":
        order_col = '-' + order_col
        order_args.append(order_col)
# order_by可以传入多个值，在不确定要传入多少个值的情况下，可以把值先保存到列表，再通过*args把列表的多个值传入
EventInfo = EventInfo.order_by(*order_args)[start_index:end_index]

datatable 定时刷新

$(function () {
    function refresh() {
          var table = $('#eventtable').DataTable();
          table.ajax.reload(null, false); // 刷新表格数据，分页信息不会重置
        }
    // 每隔5秒刷新一次数据
    setInterval(refresh, 5000);
})