Javascript 如何动态地将行添加到jquery数据表中,并优化要显示的列?
我想在pageload上的数据表中动态添加行 我想将来自datatable的ajax请求的数据分成两行(如果条件为true,则第二行将动态添加到该行) 下面是一个例子,应该更清楚地说明这一点Javascript 如何动态地将行添加到jquery数据表中,并优化要显示的列?,javascript,jquery,html,datatable,Javascript,Jquery,Html,Datatable,我想在pageload上的数据表中动态添加行 我想将来自datatable的ajax请求的数据分成两行(如果条件为true,则第二行将动态添加到该行) 下面是一个例子,应该更清楚地说明这一点 <table> <thead> <tr> <td>Name</td> <td>City</td> <td>Work</td> <td>Address</td&
<table>
<thead>
<tr>
<td>Name</td>
<td>City</td>
<td>Work</td>
<td>Address</td>
<td>Pin</td>
<td style="display:none">Mobile</td>
<td style="display:none">Email</td>
<td style="display:none">Profession</td>
</tr>
</thead>
</table>
我的隐藏类很简单
.hidden{
display:none;
}
注意:这是服务器端表
先谢谢你
编辑:
服务器端代码
public ActionResult SummaryAjax(JQueryDataTableParamModel param)
{
int totalrecords = 0;
string username = Convert.ToString(Session["userName"]);
string month = this.Request.QueryString["month"];
string year = this.Request.QueryString["year"];
DateTime currentDate = Convert.ToDateTime("2015-09-01");
if (!string.IsNullOrEmpty(month) && !string.IsNullOrEmpty(year))
{
currentDate = Convert.ToDateTime(year + "-" + month + "-01");
}
var objparcelData = db.GetWIPForUserProc(username.ToLower(), currentDate).ToList();
totalrecords = objparcelData.Count();
if (param.iDisplayLength != -1)
objparcelData = (objparcelData.Skip(param.iDisplayStart).Take(param.iDisplayLength)).ToList();
var resultdata = (from p in objparcelData
select new GetWIPForUserProc_Result
{
Job = p.Job,
JobDescription = p.JobDescription,
Customer = p.Customer,
PreviousContractValue = p.PreviousContractValue,
ContractValue = p.ContractValue,
EstimatedFinalCost = p.EstimatedFinalCost,
EstimatedGrossMargin = p.EstimatedGrossMargin,
CostToDate = p.CostToDate,
PercentComplete = p.PercentComplete,
MarginToDate = p.MarginToDate,
RequisToDate = p.RequisToDate,
ExcessOfCostEarnings = p.ExcessOfCostEarnings,
MarginPercent = p.MarginPercent,
ChangeContractValue = p.ChangeContractValue,
ChangeEstimatedFinalCost = p.ChangeEstimatedFinalCost,
Backlog = p.Backlog,
Add1 = p.Add1,
ApprovCC = p.ApprovCC,
BillAdd1 = p.BillAdd1,
BZCode = p.BZCode,
isManualEntry = p.isManualEntry
}).ToList();
var result = from p in resultdata
select new[] { Convert.ToString(p.Job),
Convert.ToString(p.JobDescription),
Convert.ToString(p.Customer),
Convert.ToString(p.PreviousContractValue),
Convert.ToString(p.ContractValue),
Convert.ToString(p.EstimatedFinalCost),
Convert.ToString(p.EstimatedGrossMargin),
Convert.ToString(p.CostToDate),
Convert.ToString(p.PercentComplete),
Convert.ToString(p.MarginToDate),
Convert.ToString(p.RequisToDate),
Convert.ToString(p.ExcessOfCostEarnings),
Convert.ToString(p.MarginPercent),
Convert.ToString(p.ChangeContractValue),
Convert.ToString(p.ChangeEstimatedFinalCost),
Convert.ToString(p.Backlog),
Convert.ToString(p.Add1),
Convert.ToString(p.ApprovCC),
Convert.ToString(p.BillAdd1),
Convert.ToString(p.BZCode),
Convert.ToString(p.isManualEntry)
};
}
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = totalrecords,
iTotalDisplayRecords = totalrecords,
aaData = result,
},
JsonRequestBehavior.AllowGet);
我先从这里开始。数据表中的列是按索引而不是按名称排列的。您只列出了三列,因此只有前三列将有一个类分配给它们——在本例中是“隐藏”类。要隐藏PIN、Mobile、Email和Profession列,必须详细说明所有列,如下所示(注意,数字仅表示名称与ID不对应):
到目前为止,你能详细说明一下吗?为什么服务器端不根据条件追加行?我不知道是否可以从服务器端追加行?我正在使用asp.net MVCYou注意到这是一个服务器端表。因此,服务器端代码应该检查条件,然后在返回Json之前向结果集中添加一行。您必须发布服务器端代码,我才能帮助您添加行,但它应该是相当直接的。请注意,字段不同,但结果应该相同。只需将任意四个字段附加到新行即可。
public ActionResult SummaryAjax(JQueryDataTableParamModel param)
{
int totalrecords = 0;
string username = Convert.ToString(Session["userName"]);
string month = this.Request.QueryString["month"];
string year = this.Request.QueryString["year"];
DateTime currentDate = Convert.ToDateTime("2015-09-01");
if (!string.IsNullOrEmpty(month) && !string.IsNullOrEmpty(year))
{
currentDate = Convert.ToDateTime(year + "-" + month + "-01");
}
var objparcelData = db.GetWIPForUserProc(username.ToLower(), currentDate).ToList();
totalrecords = objparcelData.Count();
if (param.iDisplayLength != -1)
objparcelData = (objparcelData.Skip(param.iDisplayStart).Take(param.iDisplayLength)).ToList();
var resultdata = (from p in objparcelData
select new GetWIPForUserProc_Result
{
Job = p.Job,
JobDescription = p.JobDescription,
Customer = p.Customer,
PreviousContractValue = p.PreviousContractValue,
ContractValue = p.ContractValue,
EstimatedFinalCost = p.EstimatedFinalCost,
EstimatedGrossMargin = p.EstimatedGrossMargin,
CostToDate = p.CostToDate,
PercentComplete = p.PercentComplete,
MarginToDate = p.MarginToDate,
RequisToDate = p.RequisToDate,
ExcessOfCostEarnings = p.ExcessOfCostEarnings,
MarginPercent = p.MarginPercent,
ChangeContractValue = p.ChangeContractValue,
ChangeEstimatedFinalCost = p.ChangeEstimatedFinalCost,
Backlog = p.Backlog,
Add1 = p.Add1,
ApprovCC = p.ApprovCC,
BillAdd1 = p.BillAdd1,
BZCode = p.BZCode,
isManualEntry = p.isManualEntry
}).ToList();
var result = from p in resultdata
select new[] { Convert.ToString(p.Job),
Convert.ToString(p.JobDescription),
Convert.ToString(p.Customer),
Convert.ToString(p.PreviousContractValue),
Convert.ToString(p.ContractValue),
Convert.ToString(p.EstimatedFinalCost),
Convert.ToString(p.EstimatedGrossMargin),
Convert.ToString(p.CostToDate),
Convert.ToString(p.PercentComplete),
Convert.ToString(p.MarginToDate),
Convert.ToString(p.RequisToDate),
Convert.ToString(p.ExcessOfCostEarnings),
Convert.ToString(p.MarginPercent),
Convert.ToString(p.ChangeContractValue),
Convert.ToString(p.ChangeEstimatedFinalCost),
Convert.ToString(p.Backlog),
Convert.ToString(p.Add1),
Convert.ToString(p.ApprovCC),
Convert.ToString(p.BillAdd1),
Convert.ToString(p.BZCode),
Convert.ToString(p.isManualEntry)
};
}
return Json(new
{
sEcho = param.sEcho,
iTotalRecords = totalrecords,
iTotalDisplayRecords = totalrecords,
aaData = result,
},
JsonRequestBehavior.AllowGet);
"aoColumns": [
{ "sName": "0Name", "bSortable": false, "sClass": "" },
{ "sName": "1City", "bSortable": false, "sClass": "" },
{ "sName": "2Work", "bSortable": false, "sClass": "" },
{ "sName": "3Address", "bSortable": true, "sClass": "" },
{ "sName": "4Pin", "bSortable": true, "sClass": "hidden" },
{ "sName": "5Mobile", "bSortable": true, "sClass": "hidden" },
{ "sName": "6Email", "bSortable": false, "sClass": "hidden" },
{ "sName": "7Profession", "bSortable": false, "sClass": "hidden" }
]