前端列表模板(可直接使用)

最新推荐文章于 2024-05-23 18:39:43 发布

大罗法咒

最新推荐文章于 2024-05-23 18:39:43 发布

阅读量3.6k

点赞数 2

分类专栏：归纳总结集

本文链接：https://blog.csdn.net/qq_26917447/article/details/88862765

版权

归纳总结集专栏收录该内容

20 篇文章 0 订阅

订阅专栏

1.index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<title>BootstrapTable分页</title>
 
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.16.0/bootstrap-table.min.js"></script>
</head>
<body>
 
	<div class="bootstrap-table">
		<table id="exampleTable" data-mobile-responsive="true">
		</table>
	</div>
 
	<script type="text/javascript" src="/js/demo.js"></script>
</body>
</html>

demo.js

$(function() {
	load();
	   $(document).on('keydown', function (event) {
	        // 键盘翻页事件
	        var e = event || window.event || arguments.callee.caller.arguments[0];
	        if (e && e.keyCode == 38 || e && e.keyCode == 37) {//上,左
	            // 上一页
	            $('.page-pre').click()
	        }
	        if (e && e.keyCode == 40 || e && e.keyCode == 39) {//下,右
	            // 下一页
	            $('.page-next').click()
	        }

	    })
});

function load() {
	var api = "/view/list/findAnalyse";
	$('#exampleTable').bootstrapTable({
		url : api, // 请求的后台URL（*）
		method : 'get', // 请求方式：get/post（*）
		showRefresh : true, // 是否显示刷新按钮
		showToggle : false, // 是否显示详细视图和列表视图的切换按钮
		showColumns : false, // 是否显示列操作按钮
		detailView : false, // 是否显示详细视图
		striped : true, // 设置为true会有隔行变色效果
		dataType : 'json', // 服务器返回的数据类型
		cache : false,
        pagination: true,  //是否显示分页（*）
        paginationLoop: true,
        paginationHAlign: 'right', //right, left
        paginationVAlign: 'bottom', //bottom, top, both
        paginationDetailHAlign: 'left', //right, left
        paginationPreText: '上一页',
        paginationNextText: '下一页',
        pageSize : 10, // 如果设置了分页，每页数据条数
		pageNumber : 1, // 如果设置了分布，首页页码
		queryParamsType:'undefined',
		// 设置为limit则会发送符合RESTFull格式的参数
		singleSelect : true, // 设置为true将禁止多选
		clickToSelect : true, // 是否启用点击选中行
		dataField: 'msg',  //后端代码返回的数据格式对应列的key(msg.pkid)
		// contentType : "application/x-www-form-urlencoded",
		// 发送到服务器的数据编码类型
		pageList: [10, 25, 50, 100],   
		search : false, // 是否显示搜索框
		sidePagination : "server", // 设置在哪里进行分页，可选值为"client" 或者 "server"
		queryParams : function(params) {
			return {
				// 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
				pageNo : params.pageNumber,
				pageSize : params.pageSize,
				//search : params.search,
			};
		},
		  //加载成功时执行
        onLoadSuccess: function(data){    
            console.log("加载成功");  
        },
        //加载失败时执行  
        onLoadError: function(status){  
            console.log("加载数据失败"+status);  
        },
		columns : [ {
			title : '序号',
			field : 'pkid',
			align : 'left',
			valign : 'center',
			width : '10%',
			formatter: function (value, row, index) {
	                return value;
	        }
		}, {
			title : '用户ID',
			field : 'Code',
			align : 'left',
			valign : 'center',
			width : '20%'

		}, /*{
			title : '用户姓名',
			field : 'Name',
			align : 'left',
			valign : 'center',
			width : '50%',
			cellStyle : function(value, row, index) {
				return {
					css : {
						"word-wrap" : "break-word",
						"word-break" : "normal"
					}
				};
			}

		}*/ ]
	});
}

大罗法咒

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
前端列表模板(可直接使用)

1.index.html<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width" /><title>BootstrapTable分页</title> <...
复制链接

扫一扫

专栏目录