YAHOO.widget.DataTable 动态分页。 / 憋错料

Server:服务器端的代码输出数据格式如下：

{"total":"392","rows":[{"areaid":"1","areaname":"北京","parentid":"0","arrparentid":"0","child":"0","arrchildid":"1","listorder":"1","areacode":"bj"},{"areaid":"2","areaname":"上海","parentid":"0","arrparentid":"0","child":"0","arrchildid":"2","listorder":"2","areacode":"sh"},{"areaid":"3","areaname":"天津","parentid":"0","arrparentid":"0","child":"0","arrchildid":"3","listorder":"3","areacode":"tj"},{"areaid":"4","areaname":"重庆","parentid":"0","arrparentid":"0","child":"0","arrchildid":"4","listorder":"4","areacode":"cq"},{"areaid":"5","areaname":"河北","parentid":"0","arrparentid":"0","child":"1","arrchildid":"5,45,44,43,42,41,40,39,38,37,36,35","listorder":"5","areacode":"hebei"},{"areaid":"6","areaname":"山西","parentid":"0","arrparentid":"0","child":"1","arrchildid":"6,56,55,54,53,52,51,50,49,48,47,46","listorder":"6","areacode":"shxi"},{"areaid":"7","areaname":"内蒙古","parentid":"0","arrparentid":"0","child":"1","arrchildid":"7,68,67,66,65,64,63,62,61,60,59,58,57","listorder":"7","areacode":"neimenggu"},{"areaid":"8","areaname":"辽宁","parentid":"0","arrparentid":"0","child":"1","arrchildid":"8,82,81,80,79,78,77,76,75,74,73,72,71,70,69","listorder":"8","areacode":"liaoning"},{"areaid":"9","areaname":"吉林","parentid":"0","arrparentid":"0","child":"1","arrchildid":"9,91,90,89,88,87,86,85,84,83","listorder":"9","areacode":"jielin"},{"areaid":"10","areaname":"黑龙江","parentid":"0","arrparentid":"0","child":"1","arrchildid":"10,104,103,102,101,100,99,98,97,96,95,94,93,92","listorder":"10","areacode":"heilongjiang"},{"areaid":"11","areaname":"江苏","parentid":"0","arrparentid":"0","child":"1","arrchildid":"11,117,116,115,114,113,112,111,110,109,108,107,106,105","listorder":"11","areacode":"jiangsu"},{"areaid":"12","areaname":"浙江","parentid":"0","arrparentid":"0","child":"1","arrchildid":"12,128,127,126,125,124,123,122,121,120,119,118","listorder":"12","areacode":"zhejiang"},{"areaid":"13","areaname":"安徽","parentid":"0","arrparentid":"0","child":"1","arrchildid":"13,145,144,143,142,141,140,139,138,137,136,135,134,133,132,131,130,129","listorder":"13","areacode":"anhui"},{"areaid":"14","areaname":"福建","parentid":"0","arrparentid":"0","child":"1","arrchildid":"14,154,153,152,151,150,149,148,147,146","listorder":"14","areacode":"fujian"},{"areaid":"15","areaname":"江西","parentid":"0","arrparentid":"0","child":"1","arrchildid":"15,165,164,163,162,161,160,159,158,157,156,155","listorder":"15","areacode":"jiangxi"},{"areaid":"16","areaname":"山东","parentid":"0","arrparentid":"0","child":"1","arrchildid":"16,182,181,180,179,178,177,176,175,174,173,172,171,170,169,168,167,166","listorder":"16","areacode":"shangdong"},{"areaid":"17","areaname":"河南","parentid":"0","arrparentid":"0","child":"1","arrchildid":"17,199,198,197,196,195,194,193,192,191,190,189,188,187,186,185,184,183","listorder":"17","areacode":"henan"},{"areaid":"18","areaname":"湖北","parentid":"0","arrparentid":"0","child":"1","arrchildid":"18,216,215,214,213,212,211,210,209,208,207,206,205,204,203,202,201,200","listorder":"18","areacode":"hubei"},{"areaid":"19","areaname":"湖南","parentid":"0","arrparentid":"0","child":"1","arrchildid":"19,230,229,228,227,226,225,224,223,222,221,220,219,218,217","listorder":"19","areacode":"hunan"},{"areaid":"20","areaname":"广东","parentid":"0","arrparentid":"0","child":"1","arrchildid":"20,251,250,249,248,247,246,245,244,243,242,241,240,239,238,237,236,235,234,392,233,232,231","listorder":"20","areacode":"guangdong"}],"msg":"执行成功！","statue":"success"}

</pre><pre name="code" class="plain">Client:客户端 网页页面

html:<pre name="code" class="html">引用样式文件，以及js文件不叙述，只写关键代码

  <div id="data">
            <div id="json">
            </div>
        </div>

javascript:脚本编写：

var const_DataFields = [{key:'areaid',label:'ID',width:100,sortable:true,resizeable:true},{key:'areacode',label:'客户编码',width:100,sortable:true,resizeable:true},{key:'areaname',label:'客户名称',width:250,sortable:true,resizeable:true},{key:'arrchildid',label:'子集',width:100,sortable:true,resizeable:true}];

var const_DataColums = ['areaid','areacode','areaname','arrchildid']; 

var initialRequestUrl= "order=&r="+Math.random()+"&action=area&type=json";  //参数条件直接自行构建

var _totalrecords=0;

YAHOO.namespace("datatable_01");
YAHOO.datatable_01.DynamicData = function() {
    // 表头标题
    var myColumnDefs = const_DataFields;
        /*定义数据请求*/
       var getrequireUrl  = "/ajax_json.php?";   //数据源提供页面
        var myDataSource = new YAHOO.util.DataSource(getrequireUrl);
        myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;

        /*定义数据源的请求结构*/
        myDataSource.responseSchema = {
            resultsList: "rows",
            metaFields: {
			    totalRecords: "total"
				},
            fields: const_DataColums
        };

     //构建条件
	 var generateRequest = function(oState, oSelf) {
        oState = oState || { pagination: null, sortedBy: null };
        var startIndex = (oState.pagination) ? oState.pagination.recordOffset : 0;
        var rowsPerPage = (oState.pagination) ? oState.pagination.rowsPerPage : 10;
		var _page=1;
		if(startIndex>0)
		{
		    _page =  (startIndex/rowsPerPage)+1;
		}
		return initialRequestUrl+"&pageindex="+_page+"&pagesize="+rowsPerPage;
    };  

    // DataTable configuration
    var myConfigs = {
        generateRequest: generateRequest,
        initialRequest: generateRequest(), // 初始化表格
        dynamicData: true, // Enables dynamic server-driven data
        //sortedBy : {key:"address", dir:YAHOO.widget.DataTable.CLASS_ASC},
        // 给表格添加翻页器
        paginator: new YAHOO.widget.Paginator({
            // 每页的数据条数
            rowsPerPage:10,
            // 翻页器本地化
            lastPageLinkLabel:"末页",
            firstPageLinkLabel:"首页",
            previousPageLinkLabel:"上一页",
            nextPageLinkLabel:"下一页",  

			//totalRecords:_totalrecords,   //这个是问题关键所在

			// 自定义翻页器内容
            template:"{FirstPageLink}{PreviousPageLink}{PageLinks}{NextPageLink}{LastPageLink} 跳转到{JumpToPageDropdown}页　每页显示{RowsPerPageDropdown}行",
            // 每页显示多少行的可选值
            rowsPerPageOptions : [ 10, 20, 25, 30]})
    };  

    // DataTable instance
    var myDataTable = new YAHOO.widget.DataTable("json", myColumnDefs, myDataSource, myConfigs);

    return {
        ds: myDataSource,
        dt: myDataTable
    };
}();

如果当前的页面引用文件没有错误，请求服务端返回的数据格式没有问题的话。这个产生的结构是这样的：

没有看错，这个分页，只是个摆设。

注意：

如果想要在客户端静态分页，请一次性将当前表或试图中所有数据请求返回，DataTable 会自动分页。这个做法二货才会这样去做。

如何实现动态分页？

不难发现，我们将修改上面 js脚本中的 myConfig 中 paginater 其中的一个参数即可。

var myConfigs = {
        generateRequest: generateRequest,
        initialRequest: generateRequest(), // 初始化表格
        dynamicData: true, // Enables dynamic server-driven data
        //sortedBy : {key:"address", dir:YAHOO.widget.DataTable.CLASS_ASC},
        // 给表格添加翻页器
        paginator: new YAHOO.widget.Paginator({
            // 每页的数据条数
            rowsPerPage:10,
            // 翻页器本地化
            lastPageLinkLabel:"末页",
            firstPageLinkLabel:"首页",
            previousPageLinkLabel:"上一页",
            nextPageLinkLabel:"下一页",  

	<span style="background-color: rgb(51, 255, 51);">		totalRecords:293,   //这个是问题关键所在</span>

			// 自定义翻页器内容
            template:"{FirstPageLink}{PreviousPageLink}{PageLinks}{NextPageLink}{LastPageLink} 跳转到{JumpToPageDropdown}页　每页显示{RowsPerPageDropdown}行",
            // 每页显示多少行的可选值
            rowsPerPageOptions : [ 10, 20, 25, 30]})
    };

我们来看看效果：

没错，看到分页功能了。

那么，这个参数的值如何动态传递？，这不是个可以写死的数值啊！

关键问题所在，在请求服务端的时候，先要知道满足条件查询出来的记录总数（_totalrecords）。不然没办法设置当前值。（个人感觉DataTable 这个设计有点不合理）。

得到这个记录总数（_totalrecords）。本人采用 ajax 同步实现请求数据。所以在

YAHOO.namespace("datatable_01");

YAHOO.datatable_01.DynamicData = function() {

}

这段代码之前加上如下请求记录总数，而后初始化化 DataTable 以及分页功能。

var url="/ajax_json.php?"+initialRequestUrl;
 $.ajax({
	async: false, //异步请求
	cache: false, //不从浏览器缓存中加载
	type: "GET",
	dataType: "json",
	url: url,
	success: function (data) {
		if (data != null && data.statue == "success") {
		  _totalrecords=data.total;
		}
	},
	error: function (e) {
		return;
	}
});

从而，将 myConfig 中 paginater 其中的 totalRecords 参数

totalRecords:_totalrecords,   //这个是问题关键所在

动态变换。

思考：

1.没有找到Yahoo 相关详细文档，（官网比较慢，需要翻墙，你懂得。）关于动态分页设置，如果你知道，请在后面留言，在此感谢。。。

2. （个人感觉DataTable 这个设计有点不合理），如果不是我所描述的，那就跳过，耽误宝贵时间了。

不合理的个人理由：相同条件，为何需要两次请求服务端来获取？在服务端可以一次性输出。

时间： 2024-08-28 06:56:26

YAHOO.widget.DataTable 动态分页。

YAHOO.widget.DataTable 动态分页。的相关文章

yui datatable动态修改行号

LayUI分页，LayUI动态分页，LayUI laypage分页，LayUI laypage刷新当前页

datatable动态添加，及填充数据

将DataTable进行分页并生成新的DataTable

jquery动态分页

Tornado-基于正则的路由和动态分页

python3 django动态分页引发的list切片下标越界问题

springmvc + jquery datatable + ajax实现动态分页查询

webix .datatable 表格分页