先給數據:
//原始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(); }
完工~~~~