如何动态地向jquery Datatable添加行并细化要显示的列
How to dynamically add row to the jquery Datatable and refine the columns to show?
我想在 pagload 上的数据表中动态添加行。
我想把来自datatable的ajax请求的数据分成两行(如果条件为真,第二行动态添加到行)。
下面是一个例子,它应该使你更清楚。
<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>
td with style属性不显示,而是我想添加另一行来显示这三个字段。
我的问题:
1)在满足条件的情况下,我应该使用哪个回调来附加一行(Condition为profession == 'IT'),则只在满足条件的行下添加一行。
2)我如何隐藏整个4列数据(我只隐藏头,而不是数据。(它将添加到表体本身)。
目前我正在使用"aocolcolumns"来隐藏列,但它不工作。
它添加了一个额外的标题,并且标题内的数据没有加载。
"aoColumns": [
{
"sName": "Mobile",
"sClass": "hidden",
"bSortable": false
},
{
"sName": "Email",
"sClass": "hidden",
"bSortable": false
},
{
"sName": "Profession",
"sClass": "hidden",
"bSortable": false
},
],
我的隐藏类是简单的
.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);
我先从2)开始。数据表中的列是按索引排列的,而不是按名称。您只列出了三列,因此只有前三列有一个类分配给它们——在本例中是"hidden"类。要隐藏PIN, Mobile, Email和Profession列,您必须详细说明所有列,如下所示(注意,数字只是为了显示名称与id不对应):
"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" }
]
就我而言——你能详细说明一下吗?为什么服务器端不根据条件追加行?
相关文章:
- 如何在Google柱状图中动态添加行/列
- 使用jQuery动态添加表并在其中动态添加行
- Angularjs在当前行位置添加行
- 在change事件javascript上动态添加行
- 当源工作表添加了行时,如何编写在一个工作表中添加行的脚本
- 添加行并运行多个mySQL查询
- 基于用户垂直滚动向HTML表添加行
- 在表中动态添加行
- 在使用 javascript 动态添加行时,我正在增加索引值,但出现错误
- 动态添加行时计数器的增量
- 提交表单时如何在 HTML 表格中添加行
- 按React按钮添加行
- 用于在表中添加行的Javascript代码将单元格中的数据复制到新行中
- 删除添加行
- 动态添加行时,启用/禁用Gridview中的验证程序
- 使用JS向html表添加行
- Datepicker克隆ID在添加行时保持不变
- 如何在文本框vue.js上根据指定的数字添加行
- 如何使用DWR addRows函数在顶部添加行
- 如何动态地向jquery Datatable添加行并细化要显示的列