簡體   English   中英

如何將行動態添加到 jquery 數據表並細化要顯示的列?

[英]How to dynamically add row to the jquery Datatable and refine the columns to show?

我想添加一行動態在頁面加載的數據表。

我想將來自數據表的 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 ,而是我想添加另一行來顯示這三個字段。

我的問題:

1)如果滿足條件(條件是職業=='IT' ),我應該使用哪個回調來附加一行,然后才在滿足條件的行下方添加一行。

2)我如何隱藏整個 4 列數據(我只隱藏標題而不隱藏他的數據。它會添加到表體本身)。

目前我正在使用“aocolumns”來隱藏列,但它不起作用。

它正在添加一個額外的標題,並且 tbody 中的數據未加載。

"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) 開始。 數據表中的列是按索引,而不是按名稱。 您只列出了三列,因此只有前三列會分配給它們一個類——在本例中為“隱藏”類。 要隱藏 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" }
]

就 1) 而言——你能詳細說明一下嗎? 為什么服務器端不根據條件追加行?

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM