总结一下最近使用的datatables插件的前后端(jfinal)交互

本文介绍了在使用Datatables插件进行前端表格交互时,如何与后台JFinal框架进行有效配合。重点讲解了初始化表格、服务器返回的JSON数据格式、参数规范以及如何处理错误信息。同时,提到了在Jfinal中处理逻辑的注意事项,以及前台通过Datatables API进行索引列处理和行监听的方法,强调了灵活运用回调函数以提高开发效率。
摘要由CSDN通过智能技术生成

1.适用情况

中文官网的介绍
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能。

分页,即时搜索和排序
几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
超过2900+个单元测试
免费开源 ( MIT license )! 商业支持
更多特性请到官网查看

所以为什么使用它代替普通的自定义表格不言而喻了

2.前台的表格大多数情况需要做到即时搜索以提高交互性

问题来了,ajax交互,官网例子如下

初始化:

$('#example').DataTable( {
        serverSide: true,
        ajax: {
            url: '/data-source',
            type: 'POST'
        }
    } );

服务器返回json数据(json数据这里不多说,官网很详细),先来看一下官网的服务器请求参数:

这里写图片描述

这张参数表是关键,请求参数和返回参数必须规范,而且名称必须一致,第一次适用的时候就是因为没有仔细阅读官网文档,导致后台数据一致无法载入到表格

3.后台用的是jfinal框架,很实用,适合快速开发

逻辑代码:

public void getPatientList(){
    int start = getParaToInt("start");//数据库查询起始位置
    String searchValue = getPara("search[value]");//搜索框传入的值
    String draw = getPara("draw");//原值返回给ajax
    int length = getParaToInt("length");//数据库查询分页长度
    List<User> resultList = new ArrayList<>();
    List<User> userList = new ArrayList<>();
    String sql =
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
DataTables是一个强大的jQuery表格插件,它可以快速地将HTML表格转换成可排序、可搜索、可分页的数据表格。下面是DataTables插件使用步骤: 1. 引入必要的文件 首先需要在HTML文件中引入jQuery和DataTables的相关文件。例如: ``` <!-- 引入 jQuery --> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <!-- 引入 DataTables --> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.css"> <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.js"></script> ``` 2. 创建HTML表格 在HTML文件中创建一个普通的表格,例如: ``` <table id="example"> <thead> <tr> <th>ID</th> <th>Name</th> <th>Age</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Tom</td> <td>25</td> </tr> <tr> <td>2</td> <td>Jerry</td> <td>28</td> </tr> <tr> <td>3</td> <td>Mary</td> <td>30</td> </tr> </tbody> </table> ``` 3. 初始化DataTables 使用jQuery的`DataTable()`函数初始化表格,例如: ``` $(document).ready(function() { $('#example').DataTable(); }); ``` 这样就可以将表格转换为可排序、可搜索、可分页的数据表格了。 还可以通过配置参数来定制表格的样式、功能等。例如: ``` $(document).ready(function() { $('#example').DataTable({ "paging": false, // 禁用分页 "searching": false, // 禁用搜索 "ordering": false, // 禁用排序 "info": false // 禁用信息显示 }); }); ``` 以上就是DataTables插件使用步骤,希望可以帮到你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值