javascript如何处理很多数据,类似分页切换

需求:一个用户列表数据,如果对应列表数据大于10个,就每10个保存到二维数组,后面不足10个的依然放在二维数组尾部

用处:模拟分页,或者局部刷新

var obj=[
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21},{a:22},
                {a:23},{a:24},{a:25},{a:26},{a:27},
                {a:28},{a:29},{a:30},{a:31}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21},{a:22},
                {a:23},{a:24},{a:25}
            ]
        },
        {
            "list":[
                {a:1},{a:2},{a:3},{a:4},{a:5},{a:6},
                {a:7},{a:8},{a:9},{a:10},{a:11},{a:12},
                {a:13},{a:14},{a:15},{a:16},{a:17},
                {a:18},{a:19},{a:20},{a:21},{a:22},
                {a:23},{a:24},{a:25}
            ]
        }
    ];
    //每个list的长度可能为0,无上限
    //如果对应的list.length>10,就把对应的list每10个放在二维数组内,不足10个放在二维数组的尾部,
    //例如第三个有31个,把第三个list替换为:
    //  [
    //    [{a:1},{a:2}..{a:10}],
    //    [{a:11},{a:12}...{a:20}],
    //    [{a:21}..{30}],[{a:31}]
    //  ]
    //
    //该如何一次性获得所有的二维数组?
    function resetDate(arr,num){
        //1整个数组的长度
        var leng=arr.length;
        for(var i=0;i<leng;i++){
            //2 每个列表
            var innerList=arr[i].list;
            // console.log(arr);
            //3 每个列表的个数,即lenth
            var innerLength=innerList.length;
            //如果大于10个
            if(innerLength!=0&&innerLength>num){
                //如果大于10个的,二维数组外层数组的长度:max,需要上取整
                var outerMaxLen=Math.ceil(innerLength/num);
                // 定义在每个对象上的二维数组外层
                // arr[i].outer=Array(outerMaxLen);
                arr[i].outer=[];
                var sliceNum = 0, resIndex = 0;
                // console.log(result)
                while (sliceNum < innerLength) {
                    arr[i].outer[resIndex++] = innerList.slice(sliceNum, sliceNum += num);
                }
                // 需要用到arr.slice(start,end);
                console.log(arr[i].outer);
            }

        }
    }
    resetDate(obj,10);

// 法二、,小于10个有点BUG(表示没看懂),来自:巴神
function adapter(data){
  function _splice(list,i){
    i = i || 1;
    list.push(list.splice(0,10));
    list.length>10 ? _splice(list,++i):list.push(list.splice(0,list.length-i));
  }
  data.forEach(function(v){
    _splice(v.list);
  });
}

adapter(obj);
console.log(obj);
时间: 2024-10-12 12:50:37

javascript如何处理很多数据,类似分页切换的相关文章

JavaScript如何处理JSON数据

JSON (Javescript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单: 对象是一个无序的“‘名称/值’对”集合.一个对象以“{”(左括号)开始,“}”(右括号)结束.每个“名称”后跟一个“:”(冒号):“‘名称/值’ 对”之间使用“,”(逗号)分隔 举个简单的例子: js 代码 function sho

Javascript加载talbe(包含分页、数据下载功能)

效果图如下: 首先简单说明一下,后面会给所涉及到的代码都贴上来的. 1.excel图标是一个用户控件,用来触发下载 2.首页.上页......每页多少条,这一块是一个整体,你可以选择放置在表格下面,或者表格上面都可以 3.表格则也是单独的一个,自己任意设置位置 4.复选框是否显示,自己设置,并可设置绑定的值,并有自带的方法可供你用于获取选中的复选框的对象跟值 5.表格的单行.双行.点击.悬浮.标题栏.表格的样式,都可以通过设置参数来修改,图为自带的效果 6.分页默认每页10行,分页的检测.复选框

Javascript:实操---类似京东图片点击切换

CSS部分 <style>*{ margin:0; padding:0;}#div1{ width:670px; height:150px; margin:20px auto; position:relative; overflow:hidden;}.out{ width:5000px; height:150px; overflow:hidden; position:absolute;}.out ul{ height:150px; list-style:none; position:absol

MySQL单表百万数据记录分页性能优化

原文地址:http://www.cnblogs.com/lyroge/p/3837886.html MySQL单表百万数据记录分页性能优化 背景: 自己的一个网站,由于单表的数据记录高达了一百万条,造成数据访问很慢,Google分析的后台经常报告超时,尤其是页码大的页面更是慢的不行. 测试环境: 先让我们熟悉下基本的sql语句,来查看下我们将要测试表的基本信息 use infomation_schemaSELECT * FROM TABLES WHERE TABLE_SCHEMA = 'dbna

数据的分页处理

当页面中要显示的内容过多需要分多页显示.或是数据量过大内存吃不消时,需要分页处理. 原理:每次从数据库中取出一定量的数据,通过jsp页面显示 实现: ①写一个类封装分页的页面 ②从数据库中取出一个页面的数据,将信息封装到分页页面对象中 ③根据情况,将分页的页面对象设置到request对象.session对象或servletContext对象属性中,供jsp页面调用 ④在jsp页面中显示分页数据.分页页码.上一页下一页.跳转页面等 下面看具体代码: 分页页面Page类: 1 package cn.

C#:确保属性的行为与数据类似

More Effective C# 中文版 副标题: 改善C#程序的50个具体办法 [美] Bill Wagner 著,陈黎夫 译 人民邮电出版社,2010年1月第1版 More Effective C# 中文版,第3章 C#设计实践,条目26:确保属性的行为与数据类似 属性存在着两面性.从外部看上去它就像是简单的数据元素.而在内部,则以方法的形式实现.这种两面性可能会让你创建出让用户感到迷惑的属性.使用你的类型的开发者会假设其中的属性会与直接访问数据成员一样.若你的属性不符合这样的假设,那么用

TranslateAnimation类:位置变化动画类 (类似tab切换效果)

TranslateAnimation类是Android系统中的位置变化动画类,用于控制View对象的位置变化,该类继承于Animation类.TranslateAnimation类中的很多方法都与Animation类一致,该类中最常用的方法便是TranslateAnimation构造方法. [基本语法]public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta) 参数说

Cassandra 如何处理跨数据中心的数据库延时问题

分布式系统的可靠.延时.一致性等问题是一般性问题,不局限于数据库,而Cassandra提供了一个很好的解决思路. Cassandra号称能做到跨数据中心的数据库访问的高效访问,它的实现方式其实是把延时.吞吐量与一致性的权衡交给了用户来选择.Cassandra提供了两种访问级别: LOCAL_QUORUM和EACH_QUORUM,其中 LOCAL_QUORUM能语意为本数据中心内超过半数的副本成功执行,才返回用户操作成功:而 EACH_QUORUM语意为每个数据中心都超过半数的副本执行成功,才返回

ASP.NET网站权限设计实现(三)——套用JQuery EasyUI列表显示数据、分页、查询

一.说明: JQuery EasyUI下载地址:http://jquery-easyui.wikidot.com/download,最新版本1.2.2. 首先预览一下界面: 本例实现的功能: 1.多标签 2.分页列表显示数据 3.获取选中行的标识值,删除选中行 实现以上功能主要使用了: 1.layout:布局 2.tabs:多标签 3.datagrid:表格显示数据,并可以分页 4.messager:消息框 5.window:窗口 要了解用法,下载之后,参阅demo文件夹下的demo和官方文档.