没有更多推荐了，
不良信息举报
举报内容：
layui数据表格使用方法
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！没有更多推荐了，
不良信息举报
举报内容：
关于layui数据表格的分页操作的学习笔记。
举报原因：
原文地址：
原因补充：
最多只允许输入30个字
加入CSDN，享受更精准的内容推荐，与500万程序员共同成长！深入理解jQuery layui分页控件的使用
转载 &更新时间：日 15:11:26 & 作者：分页控件
jquery layui分页控件在项目开发阶段经常用到，下面通过本文给大家介绍jQuery layui分页控件的使用，非常不错，感兴趣的朋友一起看下吧
$.getJSON( )的使用方法简介
$.getJSON( url [, data ] [, success(data, textStatus, jqXHR) ] )
url是必选参数，表示json数据的地址；
data是可选参数，用于请求数据时发送数据参数；
success是可参数，这是一个回调函数，用于处理请求到的数据。
//内容页面 &br&　　
&div id="notice_div"&&/div&&br&　　 //分页控件
&div id="notice_pages"&&/div&
var roolurl = "http://" + window.location.
var urlAshx = roolurl + "/aa/Ashx/NoticeInfo.ashx";
//var pages = 0;
//获取分页好的公告内容
function GetNoticeList(curr, cid) {
$.getJSON(urlAshx,
action: "notice_action",
courseid: cid,
page: curr || 1,//向服务端传的参数，此处只是演示
nums: 3//每页显示的条数
}, function (datajson) {//成功执行的方法
if (datajson != null) {
var norice_content = "";
//alert(datajson.pages);
$(datajson.rows).each(function (n, Row) {
norice_content += " &div class='panel panel-default'&";
norice_content += " &div class='panel-heading'&";
norice_content += " &h3 class='panel-title'&";
norice_content += Row.CreateD
norice_content += " ";
norice_content += Row.C
norice_content += " &/h3&";
norice_content += " &/div&";
norice_content += " &div class='panel-body'&";
norice_content += Row.NoticeC
norice_content += " &/div&";
norice_content += " &/div&";
$('#notice_div').html(norice_content);
//alert(11);
//调用分页
cont: 'notice_pages',//容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：&div id="page1"&&/div&
pages: datajson.pages,//总页数
groups: 5, //连续显示分页数
skip: false, //是否开启跳页
skin: '#AF0000',
curr: curr || 1, //当前页,
jump: function (obj, first) {//触发分页后的回调
if (!first) {//点击跳页触发函数自身，并传递当前页：obj.curr
GetNoticeList(obj.curr, cid);
$(document).ready(function () {
GetNoticeList(0, '&%=_courseid%&')
以上所述是小编给大家介绍的jQuery layui分页控件的使用，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具接着&&继续完善我们的demo,这次我们加一个搜索按钮
在table标签的上方，加入这样一组html
&div class="demoTable"&
搜索商户：
&div class="layui-inline"&
&input class="layui-input" name="keyword" id="demoReload" autocomplete="off"&
&button class="layui-btn" data-type="reload"&搜索&/button&
在js加入初始化代码和定义加载方法
layui.use('table', function(){
var table = layui.
//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'aid', title: '商户', width:80, sort: true}
,{field:'uv', title: '访问量', width:80, sort: true,edit:true}
,{field:'date', title: '日期', width:180}
,{field:'datatype', title: '日期类型', width:100}
,id: 'testReload'
,page: true
,height: 600
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
table.reload('testReload', {
keyword: demoReload.val()
绑定click点击事件
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
此时点击查询按钮，会将keyword这个关键字传到后端，接下来就是自己处理查询关键字业务了。
到目前为止，搜索也有了，分页也有了,对了，分页会自动传到后端page,limit2个值到后台，相当于（pageindex,pagesize）
预览下效果
看看请求的参数
&从参数可以看出，数据表格默认是get请求，返回的
给表格增加操作按钮
首先加入一组html,放到table标签下面，代码如下
&table class="layui-hide" id="LAY_table_user" lay-filter="useruv"&&/table&
&script type="text/html" id="barDemo"&
&a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail"&查看&/a&
&a class="layui-btn layui-btn-mini" lay-event="edit"&编辑&/a&
&a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"&删除&/a&
然后在js中指定工具条
//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:80, sort: true, fixed: true}
,{field:'aid', title: '商户', width:80, sort: true}
,{field:'uv', title: '访问量', width:80, sort: true,edit:true}
,{field:'date', title: '日期', width:180}
,{field:'datatype', title: '日期类型', width:100}
,{field:'right', title: '操作', width:177,toolbar:"#barDemo"}
,id: 'testReload'
,page: true
,height: 600
界面效果如下
&接下来需要给按钮绑定事件，来完成功能操作
在LayUI里面，一般采用table.on()来表示事件，例如这个
//监听表格复选框选择
table.on('checkbox(useruv)', function(obj){
console.log(obj)
我勾选一个复选框，就打印一个日志
加入以下js代码，来绑定工具条事件
//监听工具条
table.on('tool(demo)', function(obj){
var data = obj.
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
} else if(obj.event === 'edit'){
layer.alert('编辑行：&br&'+ JSON.stringify(data))
这时候，点击按钮就会有反应了。这里说明一下
接下来就是把数据传递到后端，直接将js改造如下
//监听工具条
table.on('tool(useruv)', function(obj){
var data = obj.
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
console.log(data);
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"deleteuv","aid":data.aid},
dataType: "json",
success: function(data){
if(data.state==1){
//删除这一行
obj.del();
//关闭弹框
layer.close(index);
layer.msg("删除成功", {icon: 6});
layer.msg("删除失败", {icon: 5});
} else if(obj.event === 'edit'){
layer.prompt({
formType: 2
,title: '修改 ID 为 ['+ data.id +'] 的访问量'
,value: data.uv
}, function(value, index){
//这里一般是发送修改的Ajax请求
EidtUv(data,value,index,obj);
编辑的方法
EidtUv(data,value,index,obj) {
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"edituv","aid":data.aid,"uv":value},
dataType: "json",
success: function(data){
if(data.state==1){
//关闭弹框
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
layer.msg("修改成功", {icon: 6});
layer.msg("修改失败", {icon: 5});
至此，数据表格的绑定、展示、分页、搜索、查看、编辑、删除、排序 功能都已经完成，是不是很简单？
此处粘贴出完整的页面代码
&!DOCTYPE html&
&meta charset="utf-8"&
&title&layui&/title&
&meta name="renderer" content="webkit"&
&meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&
&link rel="stylesheet" href="../Assets/css/layui.css"&
&!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 --&
&div style="margin-bottom: 5"&
&!-- 示例-970 --&
&ins class="adsbygoogle" style="display:inline-width:700height:700px" data-ad-client="ca-pub-8862" data-ad-slot=""&&/ins&
&div class="demoTable"&
搜索商户：
&div class="layui-inline"&
&input class="layui-input" name="keyword" id="demoReload" autocomplete="off"&
&button class="layui-btn" data-type="reload"&搜索&/button&
&table class="layui-hide" id="LAY_table_user" lay-filter="useruv"&&/table&
&script type="text/html" id="barDemo"&
&a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="detail"&查看&/a&
&a class="layui-btn layui-btn-mini" lay-event="edit"&编辑&/a&
&a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del"&删除&/a&
&script src="../Assets/layui.js"&&/script&
layui.use('table', function(){
var table = layui.
//方法级渲染
table.render({
elem: '#LAY_table_user'
,url: 'UVServlet'
{checkbox: true, fixed: true}
,{field:'id', title: 'ID', width:<span style="background-color: #f5f5f5; color: #, sort: true, fixed: true}
,{field:'aid', title: '商户', width:<span style="background-color: #f5f5f5; color: #, sort: true}
,{field:'uv', title: '访问量', width:<span style="background-color: #f5f5f5; color: #, sort: true,edit:true}
,{field:'date', title: '日期', width:<span style="background-color: #f5f5f5; color: #0}
,{field:'datatype', title: '日期类型', width:<span style="background-color: #f5f5f5; color: #0}
,{field:'right', title: '操作', width:<span style="background-color: #f5f5f5; color: #7,toolbar:"#barDemo"}
,id: 'testReload'
,page: true
,height: <span style="background-color: #f5f5f5; color: #0
var $ = layui.$, active = {
reload: function(){
var demoReload = $('#demoReload');
table.reload('testReload', {
keyword: demoReload.val()
//监听表格复选框选择
table.on('checkbox(useruv)', function(obj){
console.log(obj)
//监听工具条
table.on('tool(useruv)', function(obj){
var data = obj.
if(obj.event === 'detail'){
layer.msg('ID：'+ data.id + ' 的查看操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
console.log(data);
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"deleteuv","aid":data.aid},
dataType: "json",
success: function(data){
if(data.state==<span style="background-color: #f5f5f5; color: #){
obj.del();
layer.close(index);
layer.msg("删除成功", {icon: <span style="background-color: #f5f5f5; color: #});
layer.msg("删除失败", {icon: <span style="background-color: #f5f5f5; color: #});
} else if(obj.event === 'edit'){
layer.prompt({
formType: <span style="background-color: #f5f5f5; color: #
,title: '修改 ID 为 ['+ data.id +'] 的访问量'
,value: data.uv
}, function(value, index){
EidtUv(data,value,index,obj);
$('.demoTable .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
EidtUv(data,value,index,obj) {
url: "UVServlet",
type: "POST",
data:{"uvid":data.id,"memthodname":"edituv","aid":data.aid,"uv":value},
dataType: "json",
success: function(data){
if(data.state==<span style="background-color: #f5f5f5; color: #){
layer.close(index);
//同步更新表格和缓存对应的值
obj.update({
layer.msg("修改成功", {icon: <span style="background-color: #f5f5f5; color: #});
layer.msg("修改失败", {icon: <span style="background-color: #f5f5f5; color: #});
&应大家要求，将servlet代码贴出来,其中用到了json.jar
import com.weimob.models.P
import com.weimob.models.QueryR
import com.weimob.models.UvD
import com.weimob.uv.dao.WeiMobUvD
import org.json.JSONA
import org.json.JSONO
import javax.servlet.RequestD
import javax.servlet.ServletE
import javax.servlet.annotation.WebS
import javax.servlet.http.HttpS
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import java.io.IOE
import java.util.ArrayL
import java.util.L
import java.util.M
@WebServlet(name="UVServlet",
urlPatterns={"/WebApp/UVServlet"},
loadOnStartup=0)
public class UVServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String memthodname = request.getParameter("memthodname");
if(memthodname!=null){
switch (memthodname){
case "queryList":
case "deleteuv":
deleteUv(request,response);
case "edituv":
edituv(request,response);
queryList(request, response);
queryList(request, response);
private void queryList(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String str = request.getParameter("keyword");
String pindex = request.getParameter("page");
String limit = request.getParameter("limit");
response.setStatus(200);
int aid = 0;
int pagesize=15;
int index = 0;
int total = 0;
if (str != null && str.length() & 0) {
aid = Integer.valueOf(str);
if (pindex != null) {
index = Integer.parseInt(pindex);
pagesize=Integer.parseInt(limit);
WeiMobUvDao dao = new WeiMobUvDao();
StringBuffer sbtotal = new StringBuffer();
sbtotal.append("SELECT count(1) as count FROM WpMulShopDataUv_1 ");
if (aid & 0) {
sbtotal.append(" where aid=");
sbtotal.append(aid);
total = dao.GetCount(sbtotal.toString());
if (total & 0) {
StringBuffer sb = new StringBuffer();
sb.append("SELECT Id,AId,Uv,DataType,Date FROM WpMulShopDataUv_1 ");
if (aid & 0) {
sb.append(" where aid=");
sb.append(aid);
if (total & pagesize) {
sb.append(" Limit ");
int start = (index - 1) *
if (start & 0) {
start = 0;
sb.append(start);
sb.append(",");
sb.append(pagesize);
List&UvData& list = dao.QueryUv(sb.toString());
QueryResult&UvData& result = new QueryResult&UvData&(total, list);
String jsonstr= ConvertListToPageJson(list,total);
System.out.println(jsonstr);
request.setAttribute("result", jsonstr);
response.getWriter().print(jsonstr);
QueryResult&UvData& result = new QueryResult&UvData&(total, null);
JSONObject obj = new JSONObject(result);
response.getWriter().print(obj);
private void deleteUv(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String str = request.getParameter("aid");
String uvid = request.getParameter("uvid");
String limit = request.getParameter("limit");
response.setStatus(200);
int aid = 0;
int uv_id=0;
int index = 0;
int total = 0;
if (str != null && str.length() & 0) {
aid = Integer.valueOf(str);
if (uvid != null) {
uv_id = Integer.parseInt(uvid);
if(uv_id&=0){
response.getWriter().print("参数无效");
WeiMobUvDao dao = new WeiMobUvDao();
List list=new ArrayList&Integer&();
list.add(uv_id);
int res_count= dao.DeleteByIds(aid,list);
JSONObject jsonObject = new JSONObject();
jsonObject.put("state",res_count&0?true:false);
jsonObject.put("code",0);
jsonObject.put("msg","null");
response.getWriter().print(jsonObject);
private void edituv(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {
String str = request.getParameter("aid");
String uvid = request.getParameter("uvid");
String uvstr = request.getParameter("uv");
response.setStatus(200);
JSONObject jsonObject = new JSONObject();
int aid = 0;
int uv_id=0;
int uv = 0;
if (str != null && str.length() & 0) {
aid = Integer.valueOf(str);
if (uvid != null) {
uv_id = Integer.parseInt(uvid);
uv= Integer.parseInt(uvstr);
if(uv_id&=0){
response.setStatus(500);
jsonObject.put("state",-1);
jsonObject.put("msg","参数无效");
response.getWriter().print(jsonObject);
response.setStatus(500);
jsonObject.put("state",-1);
jsonObject.put("msg","参数无效");
response.getWriter().print(jsonObject);
WeiMobUvDao dao = new WeiMobUvDao();
List list=new ArrayList&Integer&();
list.add(uv_id);
UvData res= dao.getByIds(aid,uv_id);
if(res==null){
response.setStatus(500);
jsonObject.put("state",-1);
jsonObject.put("msg","参数无效,对象不存在");
response.getWriter().print(jsonObject);
int res_count= dao.modifyEntity(res);
jsonObject.put("state",res_count&0?true:false);
jsonObject.put("code",0);
jsonObject.put("msg","null");
response.getWriter().print(jsonObject);
String ConvertListToPageJson(List&?& list, int countList) {
// 新建一个json数组
JSONArray jsonArray = new JSONArray();
// 新建一个json对象
JSONObject jsonObject = null;
// 遍历泛型集合
for (Object object : list) {
jsonObject = new JSONObject(object);
jsonArray.put(jsonObject);
// 转换数据格式
String json = jsonArray.toString();
// 拼接字符串
StringBuffer sb = new StringBuffer();
sb.append("{\"count\":");
sb.append(countList);
sb.append(",\"code\":");
sb.append(0);
sb.append(",\"msg\":");
sb.append("null");
sb.append(",\"data\":");
sb.append(json);
sb.append("}");
String jsonString = sb.toString();
return jsonS
package com.example.demo.data.
import com.alibaba.fastjson.annotation.JSONF
public class Uv {
@JSONField(name="aid")
public long getaId() {
return aId;
public void setAId(long aId) {
this.aId = aId;
private long aId;
@JSONField(name="shopid")
public long getShopId() {
return shopId;
public void setShopId(long shopId) {
this.shopId = shopId;
private long shopId;
@JSONField(name="date")
public String getDate() {
public void setDate(String date) {
this.date =
@JSONField(name="uv")
public int getUv() {
public void setUv(int uv) {
@JSONField(name="id")
public int getId() {
public void setId(int id) {
@JSONField(name="datetype")
public String getDataType() {
return dataT
public void setDataType(String dataType) {
this.dataType = dataT
private String dataT
不少同学不知道怎么绑定数据源，欢迎看我上一篇。表格数据源格式：http://www.layui.com/demo/table/user/?page=1&limit=30
LayUI为我们提供了强大丰富的类库组件，完善的文档，学习成本和开发成本相对低廉，具有快速，扁平化等优点。
关于数据表格的介绍就到这里。
阅读(...) 评论()基于ThinkPHP5+layui框架的数据表格实现商品管理的相关操作基于ThinkPHP5+layui框架的数据表格实现商品管理的相关操作你家隔壁程序猿百家号本文主要介绍基于PHP框架ThinkPHP5和前端框架layui，使用layui的数据表格模块实现商品管理的相关操作，主要用到了自动分页、排序、单元格编辑、工具条toolbar等小功能。基于layui数据表格的商品列表页上图中列表页具备的功能有：分页、跳转；根据ID排序；可以根据分类，关键词查询，也可以清空查询；点击上下架开关可直接改变上下架状态；点击精选开关可直接修改是否精选；点击编辑直接跳转至编辑页面；点击删除弹窗提示要删除的内容，确定后直接删除。该页面中数据表格渲染采用的是“方法级渲染”，相关代码如下：&table class=&layui-hide& id=&goods& lay-filter=&goods&&&/table&数据表格方法级渲染其中有关可编辑的单元格，这是表头的时候写的有edit:&#39;text&#39;；表单元素开关按钮通过自定义列模板实现；对应的模板代码为：layui数据表格的自定义列模板注意到我在上述两个自定义列模板中设置的参数，给了一个switch的过滤器，统一的开关操作已经提前做好，switch监听开关事件的代码以及开关接口代码如下。开关按钮接口示例开关按钮接口示例行工具条定义相关代码为：工具条模板对应的工具条监听代码为：监听工具条的JS代码工具条的删除效果如下：工具条删除弹窗效果关于删除服务器端的处理代码比较简单，这里使用了thinkphp5的软删除。工具条删除使用了TP5的软删除最后，看一下表格重载的相关代码，数据表格上面有个搜索表单，其实不是一个完整的form，相关代码如下：表格重载的相关代码可选参数有两个，一个是商品的分类路径path，一个是手动输入的关键词。重载渲染的js代码如下，不多解释了。表格重载的相关代码数据表格重载的接口与初次渲染是一样的接口，代码如下，也不多解释了：数据表格异步接口注意：文中内容有关thinkphp5的不清楚的地方建议查看thinkphp文档手册，有关layui框架不清楚的内容请查看layui文档。本文由百家号作者上传并发布，百家号仅提供信息发布平台。文章仅代表作者个人观点，不代表百度立场。未经作者许可，不得转载。你家隔壁程序猿百家号最近更新：简介:你家隔壁程序猿，从事web开发相关工作作者最新文章相关文章}