先给数据:
//原始json数据
json = [{"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"}, {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","createtime":"2015-11-14 11:06:17"} {"id":"1","aid":"013","performanceperson":"668","customername":"u6cb3u5357u4ebauff0cu4e0du77e5u540d","customerphone":"13013013000","company":"u6731u5f69u4e91","remarks":"u9700u8981","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;1425px;heigth:30px;top:530px;'><div style='position:absolute;1425px;heigth:30px;top:550px;' id='page_bar' align='center'></div><hr style='position:absolute;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(); }
完工~~~~