js 从一个json拼接成另一个json，并做json数据分页table展示

先给数据：

//原始json数据
json = [{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"},

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

{"id":"1","aid":"013","performanceperson":"668","customername":"\u6cb3\u5357\u4eba\uff0c\u4e0d\u77e5\u540d","customerphone":"13013013000","company":"\u6731\u5f69\u4e91","remarks":"\u9700\u8981","createtime":"2015-11-14 11:06:17"}

];  
//预定义空 准备用于存放新拼接的json
var Datatable = ' ';   
//新json数据的表头
var columns = [{"cid":"customername","ctext":"客户名字"},{"cid":"customerphone","ctext":"客户电话"},{"cid":"company","ctext":"客服/公司"},{"cid":"performanceperson","ctext":"销售"},{"cid":"createtime","ctext":"创建时间"},{"cid":"remarks","ctext":"备注"},{"cid":"edit","ctext":"操作"}];       

主体ajax 获取数据---thinkphp 3.1.3

//获得全部客户信息
function getall()
{
    var ajaxurl = '/app/index.php/Customerinfos/handler';
    $.post(ajaxurl,{},function(data){
            data=getnewjson(data);
            $('#result').html(setcustomerinfoallsplitPage(json));
            tableData = getnewjson(json);
            //tableData = JSON.stringify(json);  //json转换为字符串
            splitPage(1,10);
    },'json');
    $("#wd").attr("disabled", 'true');
    $("#phone").attr("disabled", 'true');
    $("#company").attr("disabled", 'true');
}

setcustomerinfoallsplitPage(json)

function setcustomerinfoallsplitPage(json)
{
    if(json == null || json == undefined || json == '')
    {
        return "返回值为空！";
    }
    var html = "<table class='imagetable' id='tb'>";
    html+="<tr><th>客户名字</th><th>客户电话</th><th>客服/公司</th><th>销售</th><th>创建时间</th><th>备注</th><th>操作</th></tr>";
    for(i=0;i<json.length;i++){
        html+="<tr align='center'>";
        html+="<td>"+json[i].customername+"</td><td>"+json[i].customerphone+"</td><td>"+json[i].company+"</td><td>"+json[i].performanceperson+"</td><td>"+json[i].createtime+"</td><td>"+json[i].remarks+"</td><td><nobr><input type='button' id='edit' value='编辑' οnclick='javascript:edit_customerphone("+json[i].customerphone+");' /><input type='button' id='delete' value='删除' οnclick='javascript:delete_customerphone("+json[i].customerphone+");'  /></nobr></td>";
        html+="</tr>";
    }
    html+="</table><hr style='position:absolute;width:1425px;heigth:30px;top:530px;'><div style='position:absolute;width:1425px;heigth:30px;top:550px;' id='page_bar' align='center'></div><hr style='position:absolute;width:1425px;heigth:30px;top:570px;'>";
    return html;
}

拼接新的json

//截取json并拼接新的json
function getnewjson(json)
{
    if(json == null || json == undefined || json == '')
    {
        return null;
    }
    var obj = [];
    for(var i=0;i<json.length;i++) {
        var customer = {};
       customer.customername = json[i].customername;
       customer.customerphone= json[i].customerphone;
       customer.company = json[i].company;
       customer.performanceperson = json[i].performanceperson;
       customer.createtime = json[i].createtime;
       customer.remarks = json[i].remarks;
       customer.edit = "<nobr><input type='button' id='edit' value='编辑' οnclick='javascript:edit_customerphone("+json[i].customerphone+");' /><input type='button' id='delete' value='删除' οnclick='javascript:delete_customerphone("+json[i].customerphone+");'/></nobr>";
       obj.push(customer);
    }
    return obj;
}

json 数据分页

/**
page:页码
pageSize:每页的记录条数
此方法除了传入page和pageSize之外，还应知道的有三个参数：
一、表的全部数据，json串格式，可通过action查询数据库得到。
二、表头所对应的列的key及名称，也是json串格式
三、表所对应的id
注：此处只是适合表头只有一行，且事先写好的情况。您可以根据需要改一下，逻辑思路就是这样，欢迎批评指正。
*/
function splitPage(page,pageSize)
{
/*    if(Object.prototype.toString.call(tableData) === "[object String]"){  //判断是否为字符串    
        var json=JSON.parse(tableData); //字符串转化为json
    }*/
    var ptable = document.getElementById("tb");  //获取表格对象
    var num = ptable.rows.length;//table.rows返回表格中包含的所有行，此处假设表由表头1行和表体N行组成
    //alert(num);
    //清除tbody
    for(var i=num-1;i>0;i--)
    {
        ptable.deleteRow(i);
    }
    var totalNums = tableData.length;//总行数
    var totalPage = Math.ceil(totalNums/pageSize);//总页数
    var begin = (page-1)*pageSize;//页起始位置(包括)
    var end = page*pageSize;//页结束位置(不包括)
    end = end>totalNums?totalNums:end;
    //向tbody中写入数据
    var n = 1;//tbody的起始行
    for(var i=begin;i<end;i++)
    {
        var row = ptable.insertRow(n++);
        var rowData = tableData[i];
        for(var j=0;j<columns.length;j++)
        {
            var col = columns[j].cid;
            var cell = row.insertCell(j);
            var cellData = rowData[col];
            cell.innerHTML = cellData;
        }
    }
    //生成分页工具条
    var pageBar = "第"+page+"页/共"+totalPage+"页"+" ";
    if(page>1)
    {
        pageBar += "<a href='javascript:splitPage("+1+","+pageSize+");'>首页</a> ";
    }
    else
    {
        pageBar += "首页 ";
    }
    
    if(page>1)
    {
        pageBar += "<a href='javascript:splitPage("+(page-1)+","+pageSize+");'>上一页</a> ";
    }
    else
    {
        pageBar += "上一页 ";
    }
    if(page<totalPage)
    {
        pageBar += "<a href='javascript:splitPage("+(page+1)+","+pageSize+");'>下一页</a> ";
    }
    else
    {
        pageBar += "下一页 ";
    }
    if(page<totalPage)
    {
        pageBar += "<a href='javascript:splitPage("+(totalPage)+","+pageSize+");'>尾页</a> ";
    }
    else
    {
        pageBar += "尾页 ";
    }
    $('#page_bar').html(pageBar).show();
}

完工~~~~

 

转载于:https://www.cnblogs.com/GaoAnLee/p/4971566.html