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

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

是的,这些问题可能是因为你使用的方式不能正确支持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来解决搜索和分页问题,是一个比较好的解决方案。

bootstrap datatables 是一个基于 jquery 的插件,用于在 web 页面中显示、排序、搜索和分页数据。

在你的代码中,你使用了 ajax 从后端获取 json 数据,然后用 jquery 循环遍历数据,将其写入 datatables 的 tbody 中。这样做会导致 datatables 无法正确识别数据,从而导致搜索和分页功能无法正常工作。

为了解决这个问题,你需要在使用 ajax 获取数据之后,直接将数据传给 datatables,而不是通过 jquery 遍历数据并写入 tbody 中。

首先,你需要在页面上创建一个 datatables 实例。这可以通过在页面中添加如下代码来实现:

$(document).ready(function() {
    $('#myTable').DataTable({
        // datatables 配置
    });
});

其中 myTable 是你的表格的 id。

然后,你可以在 ajax 获取数据之后,使用 datatables 的 ajax 方法将数据传给 datatables。

$(document).ready(function() {
    var table = $('#myTable').DataTable({
        // datatables 配置
        "ajax": {
            "url": "/your/url",
            "dataSrc": ""
        },
        "columns": [
            {"data": "field1"},
            {"data": "field2"},
            {"data": "field3"}
        ]
    });
});

在上面的代码中,"url"是你的后端接口地址,"dataSrc"是返回数据中用来填充表格的部分。"columns"是用来指定每一列应该展示哪个字段的。

这样,datatables就能正确识别数据并实现搜索、分页等功能了。

建议你参考 datatables 的官方文档来了解更多的配置选项。