DataTables组件ServerSide的用法

最早认识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个关键参数

draw：不知道干什么的，传什么返回什么就对了
start：开始位置
length：数据长度（分页）
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)

好了，搞定

DataTables组件ServerSide的用法

猜你喜欢