Django - 如何处理前端的datatable的请求 -

问题背景

在笔者文Django - 如何实现用户进行数据查询（表格）的功能？datatable - client processing谈到在使用datatable使用client processing的时候，存在以下两个问题：

• 数据库太大的时候，比如有百万级别数据的时候， 一次性发送json数据的速度就有待考证。
• 前端一次性获得数据之后，再分页的时候，都是上次浏览的时候缓存的数据处理的，那么在用户眼前的数据可能并不是服务器中实时的数据

本文将讲述，如何通过使用datatable插件的自带能力 server processing来解决这两个问题。

HTML实现

<div class="col-md-12">                  
    <table class="table table-striped table-bordered table-hover table-checkable order-column" id="sample_1">
          <thead>
            <tr>
                <th>
                     <label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">
                        <input type="checkbox" class="group-checkable" data-set="#sample_1 .checkboxes"/>
                        <span></span>
                    </label> 
                </th>
                <th> 书名</th>
                <th> 出版社</th>
                <th> 借阅次数</th>
                <th> 数量</th>
                <th> 作者</th>
                <th> 状态</th>
                <th> ISBN</th>
            </tr>
        </thead> 
        <tbody>
        </tbody>             
    </table>
</div>

HTML实现和使用client processing的方式保持一致，并没有什么不同。

js 实现

$(document).ready(function() {

    $("#sample_1").dataTable(
        { 
            searching : false,
            destroy : true,
            "processing" : true,
            "serverSide" : true,
            "ajax": {
                "url": "book/query/",
                "type": "POST",
                "data": function(d){
                    return $.extend( {}, d, {
                        "author"  : document.getElementById('id_author').value,
                        "press"   : document.getElementById('press').value,
                        "isbn"    : document.getElementById('isbn').value,
                        "name"    : document.getElementById('book').value,
                        "status"  : document.getElementById('status').value
                        });
                }
            },
            columns: [
                { },
                { data: 'name' },
                { data: 'press' },
                { data: 'lendCount' },
                { data: 'acount' },
                { data: 'author' },
                { data: 'status' },
                { data: 'isbn' }

            ],
            'columnDefs': [{
                'targets': 0,
                'searchable': false,
                'orderable': false,
                'className': 'select-checkbox',
                'render': function (data, type, full, meta){
                return  '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="checkboxes" value="1"/><span></span></label>'
                }
            }],                

         }

    );

});

和clinet processing相比， 在需要使用datatable的server processing的特性的时候， 有以下注意点：

• 将 processing 和 serverSide 选项置为 true
• 说明ajax：type为 POST
• 指定处理该ajax请求的url，如本例中的"url":"book/query", 该url需要在Django后台的urls.py中注册

Django实现

def post(self, request):
    if request.method == "POST":
        dumpRequest(request)

        objects = Book.objects.all()

        recordsTotal = objects.count()
        recordsFiltered = recordsTotal

        start = int(request.POST['start'])
        length = int(request.POST['length'])
        draw = int(request.POST['draw'])


        objects = objects[start:(start + length)]

        dic = [obj.as_dict() for obj in objects]

        resp = {
            'draw': draw,
            'recordsTotal': recordsTotal,
            'recordsFiltered': recordsFiltered,
            'data': dic,
        }

        return HttpResponse(json.dumps(resp), content_type="application/json")

在使用datatable的server processing的时候， 后端返回给前端的数据需要以jason格式返回， 而且返回的数据格式也有要求。 如果说返回的数据格式不匹配，datatable插件会弹框提示出错信息。
在本例子中，我们的返回信息包括以下内容

• draw 这一项将获取到的ajax json request中的数据，转成int返回
• recordsTotal 所有记录的条数
• recordsFiltered 过滤之后的记录的条数
• data 返回的表格的内容数据
  在之前ajax request中，还有一个关于data域的内容也值得一提

"data": function(d){
    return $.extend( {}, d, {
        "author"  : document.getElementById('id_author').value,
        "press"   : document.getElementById('press').value,
        "isbn"    : document.getElementById('isbn').value,
        "name"    : document.getElementById('book').value,
        "status"  : document.getElementById('status').value
        });
    }
},

这段代码所起的作用是说，在ajax request的内容里面不仅仅包括datatables生成的内容， 还包含DOM里面id_author/press/isbn/book/status这5个input控件的值。这样Django后台可以根据这几个值去做数据过滤。

我们只需将form表单的submit做如下实现，即可在用户点击form表单提交按钮的时候， 进行数据查询呢

$("form").submit(function(e){
    e.preventDefault();
    table = $("#sample_1").DataTable();
    table.ajax.reload();
});

下一篇文章，我们将来讲述在server processing的情况下，如何实现数据过滤和排序

参考

• 官方关于server processing make post request的说明https://www.datatables.net/examples/server_side/post.html