JQuery使用Datatable插件（二）

2024-07-02 08:44| 来源: 网络整理| 查看: 265

一、html代码（我自定义了一个搜索框，同时用到了bootstrap框架）

注意引入相应文件，同时table一定要有thead

Datatable利用ajax增删改查关键字查询 ID 用户名用户头像联系电话邮箱创建时间状态操作

二、实现datatable的myDatatable.js文件

注意：

1.与后台交互必须设置"serverSide": true,//启用服务端分页（这是使用Ajax服务端的必须配置）

2.设置列时，必须跟后台传来的数据名保持一致（null代表没有对应数据），需要特别操作时给数据绑定函数， "render":function (data, type, full, meta)，其中的data就是对应列从后台传来的数据，直接使用即可

/** * DataTable属性配置以及生成datatable */ $('#myDatatable').DataTable({ "select": true, "processing": true,//数据加载时显示进度条 "serverSide": true,//启用服务端分页（这是使用Ajax服务端的必须配置） "searching": false,//是否启用搜索功能 "ajax": {//ajax请求后台 "url": "/booking/admin/showPage", "type": "POST", "data": function (d) { d.pageNo = $("#myDatatable").DataTable().page();//获取当前页码 var key = $("#search").val();//获取搜索框关键字 d.extraSerach=key;//查询条件 } }, "columns": [ /** * 设置列，必须跟后端传来的数据名保持一致（null代表没有对应数据），需要特别操作时给数据绑定函数， * "render":function (data, type, full, meta)，其中的data就是对应列从后台传来的数据，直接使用即可 */ {"data":"null","render":function (data, type, full, meta) { return " "; }}, {"data": "uid"}, {"data": "uname"}, {"data": "uicon","render":function (data, type, full, meta){ if(data){ var content=""; }else{ var content=""; } return content; }}, {"data": "telephone"}, {"data": "email"}, {"data": "create_time"}, {"data": "enable","render":function (data, type, full, meta) { var content=""; if(data){ content+="有效"; }else{ content+="无效"; } return content; }}, {"data": "enable","render":function (data, type, full, meta) { var content=" "; if(data){ content+="启用"; } content+="

【本文地址】

公司简介

联系我们