DataTables组件ServerSide的用法

小鱼儿 2023-08-17 16:57 65阅读 0赞

最早认识datatables是因为AdminLTE

[AdminLTE][] 是一个基于bootstrap3的后台类网站模板，开源，也有收费版。作为运维狗想做web前端是个很好的启蒙

还有一个不错的家伙叫 [easyui][]，但UI像是上古时代的产物，注重面子的还是算了

[DataTables][] 则是一个不错的jq组件，除了AdminLTE外，在sbadmin之类的模板中也能看到

感觉一些前端的东西都说不清与后端交互的方法，包括我现在在用的layuiadmin，以及我在学习的vue-admin，还是我个人打开文档的姿势不对？

不罗嗦了，直接上干货吧，先来看html及js怎么写

<div id="divTable"> <table id="table" class="table table-bordered" style="width:100%"> <thead> <tr> <th>姓名</th> <th>账号</th> <th>手机</th> <th>邮箱</th> </tr> </thead> </table> </div> <script> // datatables 英翻中 var datatableLanguage = { "sProcessing": "载入中...", "sLengthMenu": "显示 _MENU_ 项结果", "sZeroRecords": "没有匹配结果", "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项", "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项", "sInfoFiltered": "(由 _MAX_ 项结果过滤)", "sInfoPostFix": "", "sSearch": "搜索:", "sUrl": "", "sEmptyTable": "没有对应的数据", "sLoadingRecords": "载入中...", "sInfoThousands": ",", "oPaginate": { "sFirst": "首页", "sPrevious": "上页", "sNext": "下页", "sLast": "末页" }, "oAria": { "sSortAscending": ": 以升序排列此列", "sSortDescending": ": 以降序排列此列" } } // 表格初始化 var table = $("#table").DataTable({ deferRender: true, lengthMenu: [ [10, 25, -1], [10, 25, "所有"] ], searchDelay: 500, pagingType: "simple_numbers", autoWidth: false, select: true, ordering: false, processing: true, serverSide: true, ajax: "{% url 'table_data_api' %}", language: datatableLanguage, }); </script>

后端以django为例

if request.method == 'GET': kwargs = dict(request.GET) filter_args = { 'draw': int(kwargs['draw'][0]), 'start': int(kwargs['start'][0]), 'length': int(kwargs['length'][0]), 'search': kwargs['search[value]'][0] } return namedtuple('D2N', list(filter_args.keys()))(**filter_args) raise HttpBadRequest('额，好像不是约定的datatable请求格式')

可以看到datatable serverside只需要4个关键参数

1.  draw：不知道干什么的，传什么返回什么就对了
2.  start：开始位置
3.  length：数据长度（分页）
4.  search：搜索内容

拿到参数后，就可以着手数据生成的返回工作

# 获取上面datatables的请求参数 datatable_args = get_datatable_args() # 基础过滤和排序 queryset = User.objects.filter(enable=True, delete=False) # 处理表格搜索 if datatable_args.search != '': queryset = queryset.filter( Q(name__contains=datatable_args.search) | Q(account__contains=datatable_args.search) ) # 返回数据格式 ret = { 'draw': datatable_args.draw, 'recordsTotal': queryset.count(), // 页面上的共有*条数据 } # 处理数据本体 data = [] if queryset.count() != 0: if datatable_args.length == -1: # length = -1 为显示所有，不分页 item_list = queryset else: # 按length要求处理分页 # Paginator 分页函数的来源是 from django.core.paginator import Paginator p = Paginator(queryset, datatable_args.length) if datatable_args.start == 0: page_num = 1 else: page_num = datatable_args.start / datatable_args.length + 1 item_list = p.page(page_num).object_list # 开始生成表格内容 for item in item_list: data.append( [ item.name, item.account, item.mobile, item.email ] ) # 以datatables可识别格式返回，records开头的两个变量的作用为： # “共 total_num 条数据，显示 filter_num 条 # ret = { # 'recordsFiltered': filter_num, # 'recordsTotal': total_num, # 'data': data, # 'draw': datatable_args.draw, # } ret.update( **{'recordsFiltered': queryset.count(), 'data': data} ) return JsonResponse(ret)

好了，搞定

转载于:https://www.cnblogs.com/tutuye/p/11591896.html

[AdminLTE]: https://adminlte.io
[easyui]: http://www.jeasyui.com/
[DataTables]: https://www.datatables.net/