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個關鍵參數

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)

好了，搞定