jquery表格数据分页的插件实现

最新推荐文章于 2022-10-13 11:13:24 发布

踏实而耀眼

最新推荐文章于 2022-10-13 11:13:24 发布

阅读量1.4k

点赞数 1

分类专栏： js/jquery javaweb 文章标签： jquery datagrid 分页 json表格数据

本文链接：https://blog.csdn.net/qq_36127212/article/details/79282124

版权

闲来无事，自制了一个jquey表格数据分页的插件，使用了bootstrap的表格和分页样式，能将ajax查询得到的数据集合显示在表格中并实现分页功能。你只需调用jquery函数:$("#mytable").datagrid(json);即可实现。本插件需先引入bootstrap样式和jquery.js。附上效果图和源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    </head>
    <body>
        
        <div class="container" style="margin-top: 60px;">
            <table class="table table-bordered table-striped" id="mytable"></table>
        </div>
        
        <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/jquery-datagrid.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

/*
 * 表格显示数据分页插件
 * 使用该插件要调用jQuery对象的datagrid(json)方法初始化表格
 * 		参数json说明
 * 			total为总行数
 * 			rows为总记录集合
 * 			pageSize为页面显示最大记录数
 */
(function(jQuery){
	
	//给jQuery添加显示 表格的方法
	$.fn.datagrid = function(json){
		datagrid.load(json,this);
		return this;
	};
	
	var datagrid = {
		
		load:function(json,tableEle){
			datagrid.table.tableEle = tableEle;
			//初始化总记录数、页面要显示的最大记录数
			datagrid.initData(json);
			//创建表头
			datagrid.functions.createTableHead(tableEle);
			//创建表体
			datagrid.functions.createTableBody(tableEle);
			//创建表尾
			datagrid.functions.createTabelFoot(tableEle);
			//初始化表尾分页按钮
			datagrid.functions.createPaginationBtn();
			//初始化首页数据
			datagrid.pageBean.pageCode = 1;
			datagrid.functions.showData(datagrid.pageBean.pageCode);
			//初始化分页超链接事件
			datagrid.initPaginationEvent();
		},
		
		initPaginationEvent:function(){
			
			$("tfoot tr td ul li a").each(function(){
				if($(this).attr("href") == 'prev'){
					$(this).click(function(){
						datagrid.pageBean.pageCode--;
						datagrid.functions.showData(datagrid.pageBean.pageCode);
						return false;
					});
				}else if($(this).attr("href") == 'next'){
					$(this).click(function(){
						datagrid.pageBean.pageCode++;
						datagrid.functions.showData(datagrid.pageBean.pageCode);
						return false;
					});
				}else{
					$(this).click(function(){
						datagrid.pageBean.pageCode = parseInt($(this).attr("href"));
						datagrid.functions.showData(datagrid.pageBean.pageCode);
						return false;
					});
				}
				
				
			});
		},
		
		initData:function(json){
			datagrid.data.total = json.total;
			datagrid.data.dataList = json.rows;
			datagrid.data.pageSize = json.pageSize;
			datagrid.pageBean.totalPage = datagrid.pageBean.getTotalPage();
		},
		
		functions:{
			createTableHead:function(tableEle){
				//创建表头
				var $thead = $("<thead></thead>");
				datagrid.table.$thead = $thead
				//得到其中一行数据
				var oneRow = datagrid.data.dataList[0];
				//遍历得到表头字段
				var $headtr = $("<tr&

最低0.47元/天解锁文章

踏实而耀眼

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
jquery表格数据分页的插件实现

闲来无事，自制了一个jquey表格数据分页的插件，使用了bootstrap的表格和分页样式，能将ajax查询得到的数据集合显示在表格中并实现分页功能。你只需调用jquery函数:$("#mytable").datagrid(json);即可实现。本插件需先引入bootstrap样式和jquery.js。附上效果图和源码：
复制链接

扫一扫

专栏目录