bootstrap table服务器分页的问题（PHP）

前端代码块

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">

function initTable(){

$('#test-table')bootstrapTable({

method: 'get',

toolbar: '#toolbar', //工具按钮用哪个容器

striped: true, //是否显示行间隔色

cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（）

pagination: true, //是否显示分页（）

sortable: false, //是否启用排序

sortOrder: "asc", //排序方式

pageNumber:1, //初始化加载第一页，默认第一页

pageSize: 10, //每页的记录行数（）

pageList: [10, 25, 50, 100], //可供选择的每页的行数（）

url: "/testProject/page4listjson",//这个接口需要处理bootstrap table传递的固定参数

queryParamsType:'', //默认值为 'limit' ,在默认情况下 传给服务端的参数为：offset,limit,sort

// 设置为 '' 在这种情况下传给服务器的参数为：pageSize,pageNumber

//queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，如果需要添加自定义参数，可以自定义一个函数返回请求参数

sidePagination: "server", //分页方式：client客户端分页，server服务端分页（）

//search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大

strictSearch: true,

//showColumns: true, //是否显示所有的列

//showRefresh: true, //是否显示刷新按钮

minimumCountColumns: 2, //最少允许的列数

clickToSelect: true, //是否启用点击选中行

searchOnEnterKey: true,

columns: [{

field: 'id',

title: 'id',

align: 'center'

}, {

field: 'testkey',

title: '测试标识',

align: 'center'

}, {

field: 'testname',

title: '测试名字',

align: 'center'

},{

field: 'id',

title: ' *** 作',

align: 'center',

formatter:function(value,row,index){

//通过formatter可以自定义列显示的内容

//value：当前field的值，即id

//row：当前行的数据

var a = '<a href="" >测试</a>';

}

}],

pagination:true

});

}

在前端通过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

服务端代码

@RequestMapping(value = "/page4listjson")

public void page4list(Integer pageSize, Integer pageNumber, String searchText, >

Bootstrap，来自

Twitter，是目前最受欢迎的前端框架。Bootstrap

是基于

HTML、CSS、JAVASCRIPT

的，它简洁灵活，使得

Web

开发更加快捷。

在进行自己的后台改版时，大体布局都使用了bootstrap，剩下的表单部分没理由不去使用它，对于表单的美化和布局，bootstrap做的也是很不错的，有大气的边框，多功能的按钮及宏观的表单布局，一切都是那么的完整与完美！

普通表单

我们需要将表单元素包裹到form-group类里，一般以<div

class="form-group"></div>来进行存放，而在它内容表单元素名称一般放在label标签里，而input标签的类名为form-control，值得注意的是，你的checkbox和radio等元素需要写在自己的div里。

例如下面的表单

<form>

<div

class="form-group">

<label

for="exampleInputEmail1">Email

address</label>

<input

type="email"

class="form-control"

id="exampleInputEmail1"

placeholder="Email">

</div>

<div

class="form-group">

<label

for="exampleInputPassword1">Password</label>

<input

type="password"

class="form-control"

id="exampleInputPassword1"

placeholder="Password">

</div>

<div

class="form-group">

<label

for="exampleInputFile">File

input</label>

<input

type="file"

id="exampleInputFile">

<p

class="help-block">Example

block-level

help

text

here</p>

</div>

<div

class="checkbox">

<label>

<input

type="checkbox">

Check

me

out

</label>

</div>

<button

type="submit"

class="btn

btn-default">Submit</button>

</form>

运行之后的效果

水平排放的表单

需要你的表单元素需要水平排放，可以在表单上添加类form-inline，这种表单一般在元素比较少时比较适用

例如

<form

class="form-inline">

<div

class="form-group">

<label

class="sr-only"

for="exampleInputEmail3">Email

address</label>

<input

type="email"

class="form-control"

id="exampleInputEmail3"

placeholder="Email">

</div>

<div

class="form-group">

<label

class="sr-only"

for="exampleInputPassword3">Password</label>

<input

type="password"

class="form-control"

id="exampleInputPassword3"

placeholder="Password">

</div>

<div

class="checkbox">

<label>

<input

type="checkbox">

Remember

me

</label>

</div>

<button

type="submit"

class="btn

btn-default">Sign

in</button>

</form>

普通表单+元素水平排放

这种表单用的是最多的，在一般用户注册，填写资料时，经常可以见到如下的表单效果

实现这种表单使用了form-horizontal类，每行元素被包裹在

<div

class="form-group"></div>即可

form

class="form-horizontal">

<div

class="form-group">

<label

for="inputEmail3"

class="col-sm-2

control-label">Email</label>

<div

class="col-sm-10">

<input

type="email"

class="form-control"

id="inputEmail3"

placeholder="Email">

</div>

</div>

<div

class="form-group">

<label

for="inputPassword3"

class="col-sm-2

control-label">Password</label>

<div

class="col-sm-10">

<input

type="password"

class="form-control"

id="inputPassword3"

placeholder="Password">

</div>

</div>

<div

class="form-group">

<div

class="col-sm-offset-2

col-sm-10">

<div

class="checkbox">

<label>

<input

type="checkbox">

Remember

me

</label>

</div>

</div>

</div>

<div

class="form-group">

<div

class="col-sm-offset-2

col-sm-10">

<button

type="submit"

class="btn

btn-default">Sign

in</button>

</div>

</div>

</form>

我们通过代码也可以看到，在进行表单布局时，也可以用col-sm和col-sm-offset进行栅格布局！

以上所述是小编给大家介绍的Bootstrap表单Form全面解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

以上就是关于bootstrap table服务器分页的问题（PHP）全部的内容，包括:bootstrap table服务器分页的问题（PHP）、bootstrap3 给很多元素设定前后伪元素 ，并设为display: table; content: " "; ，为什么求详解、Bootstrap表单Form全面解析等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！