如何采用table和jQuery加載數據并實現數據與表格布局的分離

//js示例代碼
var td1="<td>B000123</td>";
var td2="<td>張三</td>";
var td3="<td>2017-09-17</td>";
var td4="<td><a href="#" class="btn btn-default">編輯</a></td>";
var tdn=......//此處省略好多列
var trString="<tr>"+td1+td2+td3+td4+tdn+"</tr>";
$("#tablelist").append(trString); //向ID為tablelist的表格追加行

<table class="table table-hover" id="tablelist">
<thead>
 <tr class="active">
	<th fname="fnum">No.</th>
	<th fname="checkbox"><input type="checkbox" selectall="fid"/></th>
	<th fname="fempnum">編號</th>
	<th fname="fempname">姓名</th>
	<th fname="fstatus">狀態</th>
	<th fname="fredate">時間</th>
	<th fname="fope">操作</th>
 </tr>
</thead>
<tbody>

</tbody>
<tfoot>
 <tr class="active"><td>【分頁代碼】</td></tr>
</tfoot>
</table>

//定義表格ID
var tableListId= "tablelist";
//定義tfoot跨列數
var tablecolnum;
//定義表格列名
var colNames;
$(function () {
 //設置tfoot跨列數
 tablecolnum = setTablefootcolspan(tableListId);
 //獲得表格列名
 colNames = getTableListColNames(tableListId);
 //加載添加數據
 getDataTable(tablelistid)

});

//數據加載調用函數示例，現實應用場景是從服務器端請求Json方式
function getDataTable(objTableID) {
 removeTbodyHtml(tableListId); //移除tbody內容
 //定義數據格式
 row = {
 index:"",
 fnum: "",
 checkbox: "",
 fempnum: "",
 fempname: "",
 fredate: "",
 fstatus: "",
 fope: ""
 }


 //從接口獲取數據后改造以下過程
 for (i = 0; i < 6; i++) {
 //賦值
 row.index = i;
 row.fnum = i+1;
 row.checkbox = "<input type='checkbox' name='fid' value='" + i + "'/>";
 row.fempnum = "C000"+row.fnum;
 row.fempname = "張三" + row.fnum;
 row.fstatus = "已啟用";
 row.fredate = "2017-09-17 12:12:11";
 row.fope = "<a href='#' class='btn btn-default'>進入</a>";
 var trAttrs = " class='warning'"; //自定義行樣式，當然可以定義更多
 //綁定數據到表格， row.index 必須唯一否則會引起行之間相互覆蓋
 BindDataTable(objTableID, colNames, row.index, row, trAttrs)
 }
 }

//************綁定數據的通用JS函數 S**********

//獲得表格列名
function getTableListColNames(tableListId) {
 var colNames = [];
 var tablecolnum = $("#" + tableListId + " thead tr th").length;
 for (col = 0; col < tablecolnum; col++) {
 colNames[col] = $("#" + tableListId + " thead th:eq(" + col + ")").attr("fname");
 }
 return colNames;
}


//設置tfoot跨列數
function setTablefootcolspan(tableid) {
 tablecolnum = $("#" + tableid + " thead tr th").length;
 if ($("#" + tableid + " tfoot") != undefined) {
 $("#" + tableid + " tfoot tr td").attr("colspan", tablecolnum);
 }
 return tablecolnum;
}

//移除tbody
function removeTbodyHtml(objTableID) {
 $("#" + objTableID + " tbody").children().remove();
}



///加載表格數據
///objTableID: 表格ID
///colNames:表格列名數組
///rowsIdx: 主鍵索引值
///rows:數據模型
///trAttrs:行熟悉，可自定義
function BindDataTable(objTableID, colNames, rowsIdx,rows,trAttrs) {
 var trbefor="",trafter="",tdstr="";
 if(trAttrs==undefined){trAttrs="";}
 
 trbefor = "<tr rowid='tr" + rowsIdx + "' id='tr" + rowsIdx + "' "+trAttrs+">";
 for (col = 0; col < colNames.length; col++) {
 if (rows[colNames[col]] == undefined) {
 tdstr += "<td></td>";
 } else {
 tdstr += "<td>" + rows[colNames[col]] + "</td>";
 }
 }
 trafter= "</tr>";

 //判斷更新還是新增
 if ($("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").length == 0)
 { 
 	$("#" + objTableID + " tbody").append(trbefor+tdstr+trafter); 
 }
 else
 { $("#" + objTableID + " tbody tr[rowid='tr" + rowsIdx + "']").html(tdstr); }

 tdstr = "";
}

 //************綁定數據JS函數 E**********