怎么设置页面页数跳转
怎么设置页面页数跳转，就像把第一幅图的页码啥的改成第二个这种
可以采用分页插件实现分页效果，如有帮助，采纳一下哈。
@{
ViewBag.Title = "BootstrapTable 入门";
Layout = null;
}
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
<!-- jquery -->
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引入中文语言包 -->
<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
<div style="">
<div style="width:500px">
<!--定义table-->
<table id="table"></table>
</div>
<div id="toolbar" class="btn-group pull-right" style="margin-right: 20px;">
<button id="btn_edit" type="button" class="btn btn-default" style="border-radius: 0">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
</button>
<button id="btn_delete" type="button" class="btn btn-default" style="">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
</button>
<button id="btn_add" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
</button>
</div>
</div>
@*<div>
<table data-toggle="table" data-url="">
<thead>
<tr>
<th data-field="Name">姓名</th>
<th data-field="Age">年龄</th>
<th data-field="Work">职业</th>
</tr>
</thead>
</table>
</div>*@
<script>
$("#table").bootstrapTable({ // 对应table标签的id
method: 'get',
url: "/Home/GetTestDataPager", // 获取表格数据的url
contentType: "application/x-www-form-urlencoded",//一种编码。好像在post请求的时候需要用到。这里用的get请求，注释掉这句话也能拿到数据
dataField: "data",//这是返回的json数组的key.默认是"rows".这里只有前后端约定好就行
cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
striped: true, //表格显示条纹，默认为false
pagination: true, // 在表格底部显示分页组件，默认false
pageList: [10, 20, 50, 100, 200, 500], // 如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
pageSize: 10, // 页面数据条数
pageNumber: 1, // 初始化加载第一页，默认第一页
sidePagination: 'server', // 设置为服务器端分页 客户端：client
search: false,
toolbar: '#toolbar',//指定工具栏
searchOnEnterKey: true, //设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
undefinedText: '---', //当数据为 undefined 时显示的字符
singleSelect: false,//设置True 将禁止多选
clickToSelect: true,//设置true 将在点击行时，自动选择rediobox 和 checkbox
height: 650, //定义表格的高度。
searchTimeOut: 500,// 默认500 设置搜索超时时间。
toolbarAlign: 'right',// 指定 toolbar 水平方向的位置。'left' 或 'right'
paginationDetailHAlign: 'left',//指定 分页详细信息 在水平方向的位置。'left' 或 'right'。
showHeader: true,//是否显示列头。
trimOnSearch: true,//设置为 true 将自动去掉搜索字符的前后空格。
rowStyle: function (row, index) {
var style = {
// css: { 'height': '10px', 'font-size': 'small', 'classes':'danger'}
};
return style;
},
queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
return {
pageSize: params.limit, // 每页要显示的数据条数
currentPage: params.offset / params.limit + 1, // 每页显示数据的开始行号
sort: params.sort, // 要排序的字段
sortOrder: params.order, // 排序规则
//dataId: $("#dataId").val() // 额外添加的参数
// search: params.search, //搜索框内容
}
},
sortName: 'id', // 要排序的字段
sortOrder: 'desc', // 排序规则
columns: [
{
checkbox: true, // 显示一个勾选框
align: 'center' // 居中显示
},
{
radio: true, //设置为True的时候 则显示一列radio组件，该列的宽度为固定宽度
align: 'center' // 居中显示
},
{
field: 'Name', // 要显示数据的字段名称，可以理解为json对象里的key
title: '姓名', // 表格表头显示文字
align: 'center', // 左右居中
valign: 'middle', // 上下居中
visible: true
},
{
field: 'Age',
title: '年龄',
align: 'center',
valign: 'middle'
},
{
field: 'Work',
title: '职业',
align: 'center', //设置单元格数据的左右对齐方式， 可选择的值有：’left’, ‘right’, ‘center’
valign: 'middle', //设置单元格数据的上下对齐方式， 可选择的值有：’top’, ‘middle’, ‘bottom’
formatter: function (value, row, index) { // 单元格格式化函数
//value： 该列的字段值；
//row： 这一行的数据对象；
// index： 行号，第几行，从0开始计算
var text = '-';
if (value == 1) {
text = "方式一";
} else if (value == 2) {
text = "方式二";
} else if (value == 3) {
text = "方式三";
} else if (value == 4) {
text = "方式四";
}
return value;
},
cellStyle: function (value, row, index) { // cell的样式设置,可以返回css或者classes
return {
css: { 'height': '10px', 'font-size': 'small' },
classes: 'danger'
}
},
events: function (value, row, index) {
alert(value);
}
}, {
title: "操作",
align: 'center',
valign: 'middle',
width: 160, // 定义列的宽度，单位为像素px
formatter: function (value, row, index) {
return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.Age + '\')">删除</button> <button class="btn btn-primary btn-sm" onclick="del(\'' + row.Age + '\')">删除</button>';
},
cellStyle: function (value, row, index) {
return { classes: 'danger' }
}
}
],
onLoadSuccess: function (result) { //加载成功时执行
console.info("加载成功");
},
onLoadError: function () { //加载失败时执行
console.info("加载数据失败");
}
})
</scrip
随便找个插件，加入分页就行了，ant，element等等都有
自己写的话，那得不少手脚
不要重复造轮子，直接用插件吧
用插件
1）哥们，直接用插件，自己写，估计你的头发会少几根！
2）element、bootstrap等等都有，看你选择哪种吧！