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='編輯' onclick='javascript:edit_customerphone("+json[i].customerphone+");' /><input type='button' id='delete' value='刪除' onclick='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='編輯' onclick='javascript:edit_customerphone("+json[i].customerphone+");' /><input type='button' id='delete' value='刪除' onclick='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();
}

完工~~~~