我的bootstrap datatables为什么不能分页和查询？

Question

我的前端使用bootstrap、jquery。后端使用django。我用一个datatable来显示数据，发生了以下问题：
1）页面seach搜索框不工作。
不管输入什么都搜不到（表格所有内容消失），点击右边的×号也不能回退；
2）没有分页。
我的表格内容是这样生成的：
1）django生成一个json，利用jq的ajax得到；
2）jq循环叠加一堆、,然后用.htm()方法在datatable的tbody区写入表格信息。
隐约感觉搜索故障、不分页问题是不是与这个写入方式有关？请指教！！

Answer 1

是的，这些问题可能是因为你使用的方式不能正确支持datatable的搜索和分页功能。

首先，在使用ajax获取json数据并通过jquery循环叠加写入表格时，datatable并不能正确处理搜索和分页功能。你需要使用datatable提供的server-side processing来解决这个问题。

具体来说，你需要在后端使用Django将数据库中的数据查询出来，并使用JsonResponse将数据以json格式返回给前端。然后在前端使用datatable的ajax配置项来获取数据，并在datatable初始化时传入这些配置。

其次，分页功能，你可以在后端使用分页库来查询数据库并返回指定页的数据，然后在前端使用datatable的配置项来控制分页。

下面是一个示例代码：

# views.py
from django.http import JsonResponse
from django.core import paginator

def get_data(request):
    data = YourModel.objects.all()
    paginator = Paginator(data, 10)
    page = request.GET.get('page')
    data = paginator.get_page(page)
    return JsonResponse(data, safe=False)

# js
$(document).ready(function() {
    var table = $('#example').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "/get_data/",
            "dataType": "json",
            "type": "GET",
        },
        "columns": [
            {"data": "field1"},
            {"data": "field2"},
            {"data": "field3"},
        ]
    });
});

这样你就可以得到一个支持搜索和分页的datatable了。

另外，还需要注意几点：

你需要在后端配置路由，使得前端能够请求/get_data/这个路径获取数据。

你需要在前端配置表格的HTML结构，使得datatable能够正确渲染表格。

你需要在后端配置数据模型，使得能够正确查询数据库并返回数据。

你需要在前端配置列的数据类型，使得datatable能够正确渲染每一列的数据。

总的来说，通过使用datatable的server-side processing来解决搜索和分页问题，是一个比较好的解决方案。