简体   繁体   中英

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

I want to add row dynamically in the datatable on pageload .

i want to split the data coming from the ajax request of datatable into two rows(second row added dynamically to the row if the condition is true).

here is the example which should make it more clear.

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

The td with style attribute are not to be shown instead i want to add another row to show these three field.

My Question:

1) which callback should i use to append a row in case a condition is met (Condition is profession == 'IT' ) only then add a row below that row whose condition is met.

2) How i can hide the whole 4 column data (i am hiding only header but not he data. it will add to the table body itself).

Currently i am using "aocolumns" to hide column but it is not working.

it is adding an extra header and data inside the tbody is not loading.

"aoColumns": [
               {
                 "sName": "Mobile",
                 "sClass": "hidden",
                 "bSortable": false
                },
                 {
                 "sName": "Email",
                 "sClass": "hidden",
                 "bSortable": false
                 },
                   {
                   "sName": "Profession",
                   "sClass": "hidden",
                   "bSortable": false
                   },                                
                 ],

My hidden class is simple

.hidden{
display:none;
}

Note: This is server side table.

Thank you in advance

EDIT:

server Side Code

     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);

I'll start with 2) first. The columns in datatables are by index, not by name. You have only three columns listed, so only the first three columns will have a class assigned to them -- in this case, the "hidden" class. To hide the PIN, Mobile, Email and Profession columns, you must detail all the columns, as the following shows (note, the numbers are only to show that the names don't correspond with the ids):

"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" }
]

As far as 1) goes -- can you elaborate a little? Why doesn't the server side append the row based on the condition?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM