bootstrap 表格 ajax,bootstrap-table实现ajax分页
bootstrap版本 为 3.X
bootstrap-table.min.css bootstrap-table-zh-CN.min.js bootstrap-table.min.js
前端bootstrap+jQuery,服务端使用Laravel5.5实现restful风格服务
前端代码块
html部分:
javascript部分://定义表格内按钮的绑定事件,一定要写在表格初始化之前,否则会找不到该事件而报错
window.add_event= {
'click #show_logs': function (e, value, row, index) {
...
}
};
//根据窗口调整表格高度
$(window).resize(function() {
$('#mytab').bootstrapTable('resetView', {
height: tableHeight()
})
})
//生成用户数据
$('#mytab').bootstrapTable({
method: 'post',
contentType: "application/x-www-form-urlencoded",//必须要有!!!!
url:"{{url('/...')}}",//要请求数据的文件路径
height:tableHeight(),//高度调整
toolbar: '#toolbar',//指定工具栏
striped: true, //是否显示行间隔色
dataField: "row",//bootstrap table 可以前端分页也可以后端分页,这里
//我们使用的是后端分页,后端分页时需返回含有total:总记录数,这个键值好像是固定的
//rows: 记录集合 键值可以修改 dataField 自己定义成自己想要的就好
pageNumber: 1, //初始化加载第一页,默认第一页
pagination:true,//是否分页
queryParamsType:'',//查询参数组织方式
queryParams:queryParams,//默认值为 'limit' ,在默认情况下 传给服务端的参数为:offset,limit,sort
// 设置为 '' 在这种情况下传给服务器的参数为:pageSize,pageNumber,这里设置为''方便查询
sidePagination:'server',//指定服务器端分页
pageSize:10,//单页记录数
pageList:[5,10,20,30],//分页步进值
showRefresh:true,//刷新按钮
showColumns:true,
clickToSelect: true,//是否启用点击选中行
toolbarAlign:'right',//工具栏对齐方式
buttonsAlign:'right',//按钮对齐方式
toolbar:'#toolbar',//指定工作栏
sortOrder:'desc',//设置查询排序方式
columns:[
{
title:'ID',
field:'id',
sortable:true,
// visible:false
},
{
title:'操作',
field:'button',
formatter:addButton(),//添加按钮,看下面
events:add_event,//给添加的按钮绑定事件,看上面
}
],
locale:'zh-CN',//中文支持,
responseHandler:function(res){
//在ajax获取到数据,渲染表格之前,修改数据源
res = {total:res.total,row:res.data};
console.log(res);
return res;
}
})
function addButton(value,row,index) {
return [
'查看日志'
].join('');
}
在前端通过请求获取table数据时,bootstrap table会默认拼一个 searchText的参数,来支持查询功能。
最后再说一句,了解一个插件最快的方法是查文档,能走好多弯路~
bootstrap 表格 ajax,bootstrap-table实现ajax分页相关推荐
- php bootstrap表格,初学 Bootstrap 表格
一.基本款 在 编号商品数量 1苹果32西瓜5合计8 在上面两张图中,注意两点,第一,表格是充满了整个网页的;第二,随着网页宽度变大,表格会自适应的变大. 二.条纹表格 通过添加 .table-str ...
- Bootstrap表格样式使用方法
基本Bootstrap表格样式 Bootstrap最基本的表格样式就是在<table>标签中加入table类,然后在标签内嵌套thead和tbody元素即可. 例如:<table c ...
- paginatorhelper ajax,Bootstrap Paginator+PageHelper实现分页效果_蓝瞳_前端开发者
最近需要做一个分页,找了挺多的前端分页效果,发现Bootstrap Paginator分页插件效果不错,而我页面也是用BootStrap做的响应式页面,就做了实现一个简单的分页效果. PageHelp ...
- bootstrap table通过ajax获取后台数据展示在table
1. 背景 bootstrap table 默认向后台发送语法的dataType为 json,但是为了解决跨域问题我们需要将dataType改为jsonp,这时就需要修改bootstrap table ...
- bootstrap pagewrapper_BootStrap table服务端分页
/** * 初始化 BootStrap Table 的封装 * * 约定:toolbar的id为 (bstableId + "Toolbar") * * @author fengs ...
- php 点击表头排序,TP5+ajax实现点击表格表头切换排序,带分页
TP5+ajax实现点击表格表头切换排序,带分页 2018-08-15 14:59:06ThinkPHP php接收页码请求的地址 /** * ajax 无刷新分页 * param $page int ...
- jQuery ajax bootstrap layui
jQuery 概述: jQuery是一个快速.简洁的javaScript代码库. jQuery设计宗旨是"Write less,do more". 提供一种简便的javaScrip ...
- bootstrap table 光标_第三章之Bootstrap 表格与按钮功能
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.表 ...
- Bootstrap Bootstrap表格插件bootstrap-table配置与应用小结
Bootstrap表格插件bootstrap-table配置与应用小结 by:授客 QQ:1033553122 1. 测试环境 win7 JQuery-3.2.1.min.js 下载地址: h ...
最新文章
- python yield理解_对Python中Yield的理解
- Win64 驱动内核编程-33.枚举与删除对象回调
- C++继承中的同名成员变量处理方法
- 项目管理 管理的是什么?
- java中this.value_java中关键字this的用法
- python3多进程 进程池 协程并发
- wide Deep tensorflow实现
- 算法复杂度为O(N) 的排序算法
- iview admin npm install报错_安装laravel-admin拓展执行数据迁移报错处理
- 数据库的范式总结(待续)
- Bash : 冒泡排序
- angular的组件通信
- 使用计算机键盘的基本步骤,键盘指法练习方法
- StructedStreaming Kafka 排错(AbstractCoordinator: Marking the coordinator *dead for grou
- 【云原生|实战研发】2:Pod的深入实践与理解
- 微信小程序获取启动参数
- 云耀服务器切换系统,云耀云服务器切换操作系统
- 如何写出好的SEO标题,网页标题SEO优化的方法
- 使用pyecharts遇到的坑(去掉地图标识小红点)!
- 利用51单片机+0.96寸iic接口oled显示图片或动图