easyui datagrid 底部分页栏不显示

为什么昵称总是被抢 2016-10-14 10:57:24
如图

现在分页栏显示不出来，怎么办？
贴上我的页面代码


     var time = $("#time").val();

    	  $('#tt').datagrid({  

    	        title: "省市单位数据",  

    	        url: '<%=request.getContextPath()%>/Sgszbzs/getGriddataBySql?kpiid='+id+'&time='+time,  

    	        pageSize:30,

    	        //high:100%,

    	        rowStyler: function(index,row){

    	        	return 'font-size:10px;';

    	        	},

    	        	pageList : [30,40,50],//可以选择的分页集合

    				nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取

    				striped : true,//设置为true将交替显示行背景。

    				collapsible : true,//显示可折叠按钮

    				fitColumns:true,//允许表格自动缩放，以适应父容器

    				pagination : true,//分页

    				rownumbers : true,//行数

    	        columns: [  

    	            [  

    	                {field: 'dwbm', title: '单位编码', width: 100, align: "center"},  

    	                {field: 'dwmc', title: '单位名称', width: 130, align: "center"},  

    	                {field: 'dwjb', title: '单位级别', width: 100, align: "center"},

    	                {field: 'zbjg', title: '指标结果', width: 100, align: "center"},

    	                {field: 'sfyj', title: '是否预警', width: 100, align: "center"},

    	                {field: 'sfss', title: '是否申诉', width: 100, align: "center"},

    	                {field: 'gbgs', title: '指标公式', width: 280, align: "center"},

    	            ]  

    	        ]  

    	    });


对应页面代码


   <div id="tt" data-options="region:'center'" style="width:100%;height:100%;">

		  </div>
...全文
8605 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
qq_39273507 2018-03-07
  • 打赏
  • 举报
 回复
请问你底部分页栏被挡住，没显示是怎么改的。跪谢
qq_19808873 2017-08-30
  • 打赏
  • 举报
 回复 1
1.首先，先保证前后台的数据正确，这是分页栏能够存在的前提。具体为：request中必须包含page=1&rows=5两个参数，response中必须返回如下的json字符串类型 {"total":16,"rows":[{普通json对象}, {普通json对象} ]}。这样如果数据正确，datagrid就能够自动创建分页栏了。参数说明：page为前台要查询的页，rows为前台的每页记录数；total为后台返回的（数据库的）总记录数，（第二个）rows为后台返回的json对象数组。 2.如果在浏览器捕捉到了这些数据，且数据无误，那么很可能是datagrid的分页栏被其他元素遮盖了。解决办法：将datagrid的父元素设置一个底部间隙，即 style="padding-bottom:26px"。 如果有误，欢迎指正 QQ：1454316907
liqiexingxing 2017-03-25
  • 打赏
  • 举报
 回复
引用 9 楼 u011248049 的回复:
[quote=引用 6 楼 Ragin 的回复:]
[quote=引用 5 楼 u011248049 的回复:]

你那个应该没错吧，下面这个demo可以用的，你把js css 路径改下 然后对比下js代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/icon.css" />

    <script src="js/jquery.js" type="text/javascript"></script>

    <script src="js/jqueryeasyui/jquery.easyui.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

	//构造json数据

	var data = [];

	for (var i = 1; i < 31; ++i) {  

		data.push({  

			"dwbm":i,  

			"dwmc":"dwmc" + i,

			"dwjb":"dwjb" + i,

			"zbjg":"zbjg" + i,

			"sfyj":"sfyj" + i,

			"sfss":"sfss" + i,

			"gbgs":"gbgs" + i

		})  

	} 

		 

	$(function () {

		getTableData();

	});



	function getTableData(){

        $('#tt').datagrid({    

            title: "省市单位数据",

			//pageSize:30,

			//high:100%,

			rowStyler: function(index,row){

				return 'font-size:10px;';

			},

			//pageList : [30,40,50],//可以选择的分页集合

			nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取

			striped : true,//设置为true将交替显示行背景。

			collapsible : true,//显示可折叠按钮

			fitColumns:true,//允许表格自动缩放，以适应父容器

			rownumbers : true,//行数

            data:data.slice(0,5), 

            idField: 'dwbm',

            columns: [[  

					{field: 'dwbm', title: '单位编码', width: 100, align: "center"},  

					{field: 'dwmc', title: '单位名称', width: 130, align: "center"},  

					{field: 'dwjb', title: '单位级别', width: 100, align: "center"},

					{field: 'zbjg', title: '指标结果', width: 100, align: "center"},

					{field: 'sfyj', title: '是否预警', width: 100, align: "center"},

					{field: 'sfss', title: '是否申诉', width: 100, align: "center"},

					{field: 'gbgs', title: '指标公式', width: 280, align: "center"},

			]],

			pagination : true//分页

        });

         

        var p = $('#tt').datagrid('getPager'); 

        $(p).pagination({ 

			showRefresh: false,

			total: data.length,

			pageSize: 5,//每页显示的记录条数，默认为10 

			pageList: [5,10,15],//可以设置每页记录条数的列表 

			beforePageText: '第',//页数文本框前显示的汉字 

			afterPageText: '页    共 {pages} 页', 

			displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  

			onSelectPage:function (pageNo, pageSize) {  

				var start = (pageNo - 1) * pageSize;  

				var end = start + pageSize;  

				$("#tt").datagrid("loadData", data.slice(start, end));  

				$(p).pagination('refresh', {  

					total:data.length,  

					pageNumber:pageNo  

				});  

			} 

		}); 

	}

    </script>

</head>

<body>

<div id="tt" data-options="region:'center'" style="width:1024px;height:500px;">

          </div>

</body>

</html>


[/quote]
现在问题解决了，能显示了，但现在点击翻页的箭头按钮，页面数据还是停留在第一页，这怎么办[/quote]

请问一下，你这个翻页图标怎么解决的，我现在也遇到你这样的情况，而且下面还没平铺满
Braska 2016-10-17
  • 打赏
  • 举报
 回复
引用 9 楼 u011248049 的回复:
onSelectPage:function (pageNo, pageSize) { var start = (pageNo - 1) * pageSize; var end = start + pageSize; $("#tt").datagrid("loadData", data.slice(start, end)); $(p).pagination('refresh', { total:data.length, pageNumber:pageNo }); } 这个方法打断点看能不能进这个方法。或者后台debug看下能不能进去，参数有没有对。
为什么昵称总是被抢 2016-10-14
  • 打赏
  • 举报
 回复
引用 6 楼 Ragin 的回复:
[quote=引用 5 楼 u011248049 的回复:] 你那个应该没错吧，下面这个demo可以用的，你把js css 路径改下 然后对比下js代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/icon.css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/jqueryeasyui/jquery.easyui.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
	//构造json数据
	var data = [];
	for (var i = 1; i < 31; ++i) {  
		data.push({  
			"dwbm":i,  
			"dwmc":"dwmc" + i,
			"dwjb":"dwjb" + i,
			"zbjg":"zbjg" + i,
			"sfyj":"sfyj" + i,
			"sfss":"sfss" + i,
			"gbgs":"gbgs" + i
		})  
	} 
		 
	$(function () {
		getTableData();
	});

	function getTableData(){
        $('#tt').datagrid({    
            title: "省市单位数据",
			//pageSize:30,
			//high:100%,
			rowStyler: function(index,row){
				return 'font-size:10px;';
			},
			//pageList : [30,40,50],//可以选择的分页集合
			nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
			striped : true,//设置为true将交替显示行背景。
			collapsible : true,//显示可折叠按钮
			fitColumns:true,//允许表格自动缩放，以适应父容器
			rownumbers : true,//行数
            data:data.slice(0,5), 
            idField: 'dwbm',
            columns: [[  
					{field: 'dwbm', title: '单位编码', width: 100, align: "center"},  
					{field: 'dwmc', title: '单位名称', width: 130, align: "center"},  
					{field: 'dwjb', title: '单位级别', width: 100, align: "center"},
					{field: 'zbjg', title: '指标结果', width: 100, align: "center"},
					{field: 'sfyj', title: '是否预警', width: 100, align: "center"},
					{field: 'sfss', title: '是否申诉', width: 100, align: "center"},
					{field: 'gbgs', title: '指标公式', width: 280, align: "center"},
			]],
			pagination : true//分页
        });
         
        var p = $('#tt').datagrid('getPager'); 
        $(p).pagination({ 
			showRefresh: false,
			total: data.length,
			pageSize: 5,//每页显示的记录条数，默认为10 
			pageList: [5,10,15],//可以设置每页记录条数的列表 
			beforePageText: '第',//页数文本框前显示的汉字 
			afterPageText: '页    共 {pages} 页', 
			displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  
			onSelectPage:function (pageNo, pageSize) {  
				var start = (pageNo - 1) * pageSize;  
				var end = start + pageSize;  
				$("#tt").datagrid("loadData", data.slice(start, end));  
				$(p).pagination('refresh', {  
					total:data.length,  
					pageNumber:pageNo  
				});  
			} 
		}); 
	}
    </script>
</head>
<body>
<div id="tt" data-options="region:'center'" style="width:1024px;height:500px;">
          </div>
</body>
</html>
[/quote] total: data.length, $("#tt").datagrid("loadData", data.slice(start, end)); 大神，这两处该怎么改呢，我是从后台直接获取拼好的JSON
逝_去_的_光_阴 2016-10-14
  • 打赏
  • 举报
 回复 

<body class="easyui-layout" border="false">
body加上class
Braska 2016-10-14
  • 打赏
  • 举报
 回复
引用 5 楼 u011248049 的回复:
你那个应该没错吧，下面这个demo可以用的，你把js css 路径改下 然后对比下js代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/icon.css" />

    <script src="js/jquery.js" type="text/javascript"></script>

    <script src="js/jqueryeasyui/jquery.easyui.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

	//构造json数据

	var data = [];

	for (var i = 1; i < 31; ++i) {  

		data.push({  

			"dwbm":i,  

			"dwmc":"dwmc" + i,

			"dwjb":"dwjb" + i,

			"zbjg":"zbjg" + i,

			"sfyj":"sfyj" + i,

			"sfss":"sfss" + i,

			"gbgs":"gbgs" + i

		})  

	} 

		 

	$(function () {

		getTableData();

	});



	function getTableData(){

        $('#tt').datagrid({    

            title: "省市单位数据",

			//pageSize:30,

			//high:100%,

			rowStyler: function(index,row){

				return 'font-size:10px;';

			},

			//pageList : [30,40,50],//可以选择的分页集合

			nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取

			striped : true,//设置为true将交替显示行背景。

			collapsible : true,//显示可折叠按钮

			fitColumns:true,//允许表格自动缩放，以适应父容器

			rownumbers : true,//行数

            data:data.slice(0,5), 

            idField: 'dwbm',

            columns: [[  

					{field: 'dwbm', title: '单位编码', width: 100, align: "center"},  

					{field: 'dwmc', title: '单位名称', width: 130, align: "center"},  

					{field: 'dwjb', title: '单位级别', width: 100, align: "center"},

					{field: 'zbjg', title: '指标结果', width: 100, align: "center"},

					{field: 'sfyj', title: '是否预警', width: 100, align: "center"},

					{field: 'sfss', title: '是否申诉', width: 100, align: "center"},

					{field: 'gbgs', title: '指标公式', width: 280, align: "center"},

			]],

			pagination : true//分页

        });

         

        var p = $('#tt').datagrid('getPager'); 

        $(p).pagination({ 

			showRefresh: false,

			total: data.length,

			pageSize: 5,//每页显示的记录条数，默认为10 

			pageList: [5,10,15],//可以设置每页记录条数的列表 

			beforePageText: '第',//页数文本框前显示的汉字 

			afterPageText: '页    共 {pages} 页', 

			displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  

			onSelectPage:function (pageNo, pageSize) {  

				var start = (pageNo - 1) * pageSize;  

				var end = start + pageSize;  

				$("#tt").datagrid("loadData", data.slice(start, end));  

				$(p).pagination('refresh', {  

					total:data.length,  

					pageNumber:pageNo  

				});  

			} 

		}); 

	}

    </script>

</head>

<body>

<div id="tt" data-options="region:'center'" style="width:1024px;height:500px;">

          </div>

</body>

</html>


为什么昵称总是被抢 2016-10-14
  • 打赏
  • 举报
 回复
引用 3 楼 Ragin 的回复:
[quote=引用 1 楼 Ragin 的回复:] $('#tt').datagrid({ //... pagination:true });

$('#tt').datagrid({  
//...
pagination:true
});
//设置分页控件 
    var p = $('#tt').datagrid('getPager'); 
    $(p).pagination({ 
        pageSize: 10,//每页显示的记录条数，默认为10 
        pageList: [5,10,15],//可以设置每页记录条数的列表 
        beforePageText: '第',//页数文本框前显示的汉字 
        afterPageText: '页    共 {pages} 页', 
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
    });
[/quote] 也加了，还是没用。。。。。 

  function  getTableData(id,text){
    	  var time = $("#time").val();
    	  $('#tt').datagrid({  
    	        title: "省市单位数据",  
    	        url: '<%=request.getContextPath()%>/Sgszbzs/getGriddataBySql?kpiid='+id+'&time='+time,  
    	        pageSize:30,
    	        //high:100%,
    	        rowStyler: function(index,row){
    	        	return 'font-size:10px;';
    	        	},
    	        	pageList : [30,40,50],//可以选择的分页集合
    				nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取
    				striped : true,//设置为true将交替显示行背景。
    				collapsible : true,//显示可折叠按钮
    				fitColumns:true,//允许表格自动缩放，以适应父容器
    				rownumbers : true,//行数
    	        columns: [  
    	            [  
    	                {field: 'dwbm', title: '单位编码', width: 100, align: "center"},  
    	                {field: 'dwmc', title: '单位名称', width: 130, align: "center"},  
    	                {field: 'dwjb', title: '单位级别', width: 100, align: "center"},
    	                {field: 'zbjg', title: '指标结果', width: 100, align: "center"},
    	                {field: 'sfyj', title: '是否预警', width: 100, align: "center"},
    	                {field: 'sfss', title: '是否申诉', width: 100, align: "center"},
    	                {field: 'gbgs', title: '指标公式', width: 280, align: "center"},
    	            ]  
    	        ],
    	        pagination : true//分页
    	    });  
    	  
    	  var p = $('#tt').datagrid('getPager'); 
    	    $(p).pagination({ 
    	        pageSize: 30,//每页显示的记录条数，默认为10 
    	        pageList: [30,50,60],//可以设置每页记录条数的列表 
    	        beforePageText: '第',//页数文本框前显示的汉字 
    	        afterPageText: '页    共 {pages} 页', 
    	        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
    	    });
Braska 2016-10-14
  • 打赏
  • 举报
 回复
引用 2 楼 u011248049 的回复:
分页控件的属性 不是在datagrid里面设置的 要另外加载
Braska 2016-10-14
  • 打赏
  • 举报
 回复
引用 1 楼 Ragin 的回复:
$('#tt').datagrid({ //... pagination:true });

$('#tt').datagrid({  
//...
pagination:true
});
//设置分页控件 
    var p = $('#tt').datagrid('getPager'); 
    $(p).pagination({ 
        pageSize: 10,//每页显示的记录条数，默认为10 
        pageList: [5,10,15],//可以设置每页记录条数的列表 
        beforePageText: '第',//页数文本框前显示的汉字 
        afterPageText: '页    共 {pages} 页', 
        displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
    });
为什么昵称总是被抢 2016-10-14
  • 打赏
  • 举报
 回复
引用 1 楼 Ragin 的回复:
$('#tt').datagrid({ //... pagination:true });
这个属性已经加了，但是没用
Braska 2016-10-14
  • 打赏
  • 举报
 回复
$('#tt').datagrid({ //... pagination:true });
为什么昵称总是被抢 2016-10-14
  • 打赏
  • 举报
 回复
引用 6 楼 Ragin 的回复:
[quote=引用 5 楼 u011248049 的回复:]

你那个应该没错吧，下面这个demo可以用的，你把js css 路径改下 然后对比下js代码。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

	<link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/default/easyui.css" />

    <link rel="stylesheet" type="text/css" href="js/jqueryeasyui/themes/icon.css" />

    <script src="js/jquery.js" type="text/javascript"></script>

    <script src="js/jqueryeasyui/jquery.easyui.min.js" type="text/javascript"></script>

    <script type="text/javascript" language="javascript">

	//构造json数据

	var data = [];

	for (var i = 1; i < 31; ++i) {  

		data.push({  

			"dwbm":i,  

			"dwmc":"dwmc" + i,

			"dwjb":"dwjb" + i,

			"zbjg":"zbjg" + i,

			"sfyj":"sfyj" + i,

			"sfss":"sfss" + i,

			"gbgs":"gbgs" + i

		})  

	} 

		 

	$(function () {

		getTableData();

	});



	function getTableData(){

        $('#tt').datagrid({    

            title: "省市单位数据",

			//pageSize:30,

			//high:100%,

			rowStyler: function(index,row){

				return 'font-size:10px;';

			},

			//pageList : [30,40,50],//可以选择的分页集合

			nowrap : true,//设置为true，当数据长度超出列宽时将会自动截取

			striped : true,//设置为true将交替显示行背景。

			collapsible : true,//显示可折叠按钮

			fitColumns:true,//允许表格自动缩放，以适应父容器

			rownumbers : true,//行数

            data:data.slice(0,5), 

            idField: 'dwbm',

            columns: [[  

					{field: 'dwbm', title: '单位编码', width: 100, align: "center"},  

					{field: 'dwmc', title: '单位名称', width: 130, align: "center"},  

					{field: 'dwjb', title: '单位级别', width: 100, align: "center"},

					{field: 'zbjg', title: '指标结果', width: 100, align: "center"},

					{field: 'sfyj', title: '是否预警', width: 100, align: "center"},

					{field: 'sfss', title: '是否申诉', width: 100, align: "center"},

					{field: 'gbgs', title: '指标公式', width: 280, align: "center"},

			]],

			pagination : true//分页

        });

         

        var p = $('#tt').datagrid('getPager'); 

        $(p).pagination({ 

			showRefresh: false,

			total: data.length,

			pageSize: 5,//每页显示的记录条数，默认为10 

			pageList: [5,10,15],//可以设置每页记录条数的列表 

			beforePageText: '第',//页数文本框前显示的汉字 

			afterPageText: '页    共 {pages} 页', 

			displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',  

			onSelectPage:function (pageNo, pageSize) {  

				var start = (pageNo - 1) * pageSize;  

				var end = start + pageSize;  

				$("#tt").datagrid("loadData", data.slice(start, end));  

				$(p).pagination('refresh', {  

					total:data.length,  

					pageNumber:pageNo  

				});  

			} 

		}); 

	}

    </script>

</head>

<body>

<div id="tt" data-options="region:'center'" style="width:1024px;height:500px;">

          </div>

</body>

</html>


[/quote]
现在问题解决了，能显示了，但现在点击翻页的箭头按钮，页面数据还是停留在第一页，这怎么办
easyui datagrid 数据导出到Excel
两种方法将easyui datagrid 中的数据导出到Excel中，均以验证可以正常使用
扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件完整版Demo下载
jQuery EasyUI Datagrid 用户列表鼠标悬停/离开数据行时显示人员头像（onMouseOver/onMouseOut） Demo 扩展 jQuery EasyUI Datagrid 数据行鼠标悬停离开事件，源码奉献！！！
easyui+jsp+servlet上手实例
完整的easyui的datagrid使用实例，带你快速入门，一步上手
Easyui Datagrid 实现行过滤[模糊查询]
在easy ui datagrid 列表基础上实现行过滤[行模糊查询],注：数据库远程查询
EasyUI DataGrid及Pagination(源码)
介绍EasyUI的DataGrid数据表格以及Pagination分页 按照说明可直接运行代码. 博文地址：http://blog.csdn.net/itmyhome1990/article/details/37563551
JavaScript

87,915

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章