php jquery table数据,如何采用table和jQuery加载数据并实现数据与表格布局的分离

Dear 丶 2023-01-13 10:27 16阅读 0赞

在日常开发工作中，总是遇到通过异步请求数据并用表格展示的的场景，看到很多解决此类问题通常采用拼字符串的形式，如：//js示例代码

var td1="

B000123";

var td2="

张三";

var td3="

2017-09-17";

var td4="

编辑";

var tdn=......//此处省略好多列

var trString="

"+td1+td2+td3+td4+tdn+"";

$("\#tablelist").append(trString); //向ID为tablelist的表格追加行

以上的方式采用数据和表格混合的方式可以满足需求并实现效果，但是遇到业务需求变动，导致表格列增加、减少、前后调整时，修改以上代码回很苦恼，甚至导致形如【$(this).find('td').eq(6).find('input').val() 】的代码直接报错，原因就在于数据与布局没有分离。

本着数据与布局分离的思想，把生成行的代码分离出来，列的展现形式由表格决定，数据只负责向表格对应的列绑定数据即可，于是采用了以下方式：

HTML布局部分：

No.编号姓名状态时间操作

【分页代码】

JS部分：//定义表格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 = "";

row.fempnum = "C000"+row.fnum;

row.fempname = "张三" + row.fnum;

row.fstatus = "已启用";

row.fredate = "2017-09-17 12:12:11";

row.fope = "进入";

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 = "

for (col = 0; col < colNames.length; col++) \{

if (rows\[colNames\[col\]\] == undefined) \{

tdstr += "

\} else \{

tdstr += "

" + rows\[colNames\[col\]\] + "";

trafter= "

//判断更新还是新增

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\*\*\*\*\*\*\*\*\*\*

如此当表格需要调整时，只需要改变表格的Thead的位置即可，其他一切由数据决定，具体效果如下：

![97669a68da5e7a326895993450ad814d.png][]

注意:

1. 表格必须有唯一id

2. 表格必须包括thead,tbody,tfoot属性

3. 表格thead的单元格必须是 th 且必须有列明,如 fname="fname", 一一对应定义数据格式，如果不对应则不显示该列

[97669a68da5e7a326895993450ad814d.png]: /images/20221022/dc8e509a014a4ce18317d034571a9e51.png

php jquery table数据,如何采用table和jQuery加载数据并实现数据与表格布局的分离

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Vue 中利用 el-table 实现懒加载的数据表格

相关 jQuery表格添加数据并Ajax提交数据

相关 Ajax与jQuery异步加载数据

相关 layui用table.render加载数据用table.reload重载里面的数据---解决table.render重新加载闪动的问题

相关 php jquery table数据,如何采用table和jQuery加载数据并实现数据与表格布局的分离

相关 Html重新加载table数据,jQuery使用DataTable实现删除数据后重新加载功能

相关 jquery dataTable 后台加载数据并分页

相关 jquery滚动条加载数据

相关 jquery操作table表格

相关 table表格数据绑定