oldbee0925 2023-01-18 15:17 采纳率: 91.4%
浏览 26
已结题

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

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

  • 写回答

2条回答 默认 最新

  • 「已注销」 2023-01-18 17:56
    关注

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

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 1月28日
  • 已采纳回答 1月20日
  • 创建了问题 1月18日

悬赏问题

  • ¥15 企业资源规划ERP沙盘模拟
  • ¥15 树莓派控制机械臂传输命令报错,显示摄像头不存在
  • ¥15 前端echarts坐标轴问题
  • ¥15 CMFCPropertyPage
  • ¥15 ad5933的I2C
  • ¥15 请问RTX4060的笔记本电脑可以训练yolov5模型吗?
  • ¥15 数学建模求思路及代码
  • ¥50 silvaco GaN HEMT有栅极场板的击穿电压仿真问题
  • ¥15 谁会P4语言啊,我想请教一下
  • ¥15 这个怎么改成直流激励源给加热电阻提供5a电流呀