Replies

• A95 Posts: 9Questions: 0Answers: 0

  August 2016 edited August 2016

  I use this code inside of a function to initialize the datatable:

  var table = $('#convResTabR').DataTable({
          "serverSide": true,
          "orderMulti": false,
          "bProcessing": true,
          "order": [[3, "desc"], [1, "asc"]],
          "ajax": {
              "url": "/Maintenance/LoadData",
              "type": "POST",
              "data": function (d) {
                  d.LoT = ttable;
                  d.SO = r;
              },
              "datatype": "json"
          },
          "aoColumnDefs": [
              {
                  "data": "DctN",
                  "name": "D N",
                  "visible": true,
                  "aTargets": [0],
                  "bSortable": true
              },
              {
                  "data": "Conme",
                  "name": "C N",
                  "visible": true,
                  "aTargets": [1],
                  "bSortable": true
              },
              {
                  "data": "TeN",
                  "name": "T N",
                  "visible": true,
                  "aTargets": [2],
                  "bSortable": true
              },
              {
                  "data": "BgVdDate",
                  "name": "B V D",
                  "visible": true,
                  "aTargets": [3],
                  "bSortable": true,
                  "mRender": function (data, type, full) {
                      var result = "";
                      if (data != null) {
                          if (data.indexOf("Date") > -1) {
                              var valueDate = new Date(parseInt(data.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')));
                              var curr_date = valueDate.getDate().toString();
                              var curr_month = valueDate.getMonth() + 1; //Months are zero based
                              var curr_year = valueDate.getFullYear().toString();
                              result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
                          }
                          else
                              result = data;
                      }
                      return result;
                  }
              },
              {
                  "data": "EVaD",
                  "name": "E V D",
                  "visible": true,
                  "aTargets": [4],
                  "bSortable": true,
                  "mRender": function (data, type, full) {
                      var result = "";
                      if (data != null) {
                          if (data.indexOf("Date") > -1) {
                              var valueDate = new Date(parseInt(data.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')));
                              var curr_date = valueDate.getDate().toString();
                              var curr_month = valueDate.getMonth() + 1; //Months are zero based
                              var curr_year = valueDate.getFullYear().toString();
                              result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
                          }
                          else
                              result = data;
                      }
                      return result;
                  }
              },
              {
                  "data": "R",
                  "name": "R",
                  "visible": true,
                  "aTargets": [5],
                  "bSortable": true
              },
              {
                  "data": "LA",
                  "name": "Exc",
                  "visible": true,
                  "aTargets": [6],
                  "bSortable": true
              },
              {
                  "data": "SR",
                  "name": "S R",
                  "visible": true,
                  "aTargets": [7],
                  "bSortable": true
              },
              {
                  "data": "CN",
                  "name": "C N",
                  "visible": true,
                  "aTargets": [8],
                  "bSortable": true
              },
              {
                  "data": "CR",
                  "name": "C R",
                  "visible": true,
                  "aTargets": [9],
                  "bSortable": true
              },
              {
                  "data": "CSR",
                  "name": "C S R",
                  "visible": true,
                  "aTargets": [10],
                  "bSortable": true
              },
              {
                  "data": "LaUpdB",
                  "name": "L U B",
                  "visible": true,
                  "aTargets": [11],
                  "bSortable": true
              },
              {
                  "data": "LaUpOn",
                  "name": "L U O",
                  "visible": true,
                  "aTargets": [12],
                  "bSortable": true,
                  "mRender": function (data, type, full) {
                      var result = "";
                      if (data != null) {
                          if (data.indexOf("Date") > -1) {
                              var valueDate = new Date(parseInt(data.replace(/\/+Date\(([\d+-]+)\)\/+/, '$1')));
                              var curr_date = valueDate.getDate().toString();
                              var curr_month = valueDate.getMonth() + 1; //Months are zero based
                              var curr_year = valueDate.getFullYear().toString();
                              result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
                          }
                          else
                              result = data;
                      }
                      return result;
                  }
              },
              {
                  "aTargets": [13],
                  "data": "RateId",
                  "className": "center",
                  "bSortable": false,
                  "mRender": function (data, type, full) {
                      var btn = Core.stringFormat('<button style="width:80px;font-size:10px;" type="button" data-role="edit" data-id="{0}" >Edit</button>', data);
                      btn += Core.stringFormat('<button style="margin-top:5px;width:80px;font-size:10px;" type="button" data-role="delete" data-target="#confirm-delete" data-id="{0}">Delete</button>', data);
                      return Core.stringFormat('<div class="buttons-wrapper" >{0}</div>', btn);
                  }
              }],
          "fnDrawCallback": function () {
              var holder = $("#convResTabR").find("tbody");
              var btns;
              var btens;
              //Edit button
              btens = holder.find("button[data-role='edit']");
              btens.button({
                  icons: {
                      primary: " ui-icon-pencil"
                  }
              });
              btens.off("click");
              btens.on("click", function () {
                  var id = $(this).data("id");
                  var row = $(this).closest("tr").get(0);
                  // Get the data array for this row
                  //var rowData = table.row(row).data();
                  var rowData = MaintenanceConfigurator.ActualTable.row(row).data();
  
                  //Open Dialog to Edit//
                  RatesARowData = rowData;
                  uRt(id, ttable);
              });
  
              //delete btn
              btns = holder.find("button[data-role='delete']");
              btns.button({
                  icons: {
                      primary: " ui-icon-trash"
                  }
              });
              btns.off("click");
              btns.on("click", function () {
                  var id = $(this).data("id");
                  var row = $(this).closest("tr").get(0);
                  // Get the data array for this row
                  //var rowData = table.row(row).data();
                  var rowData = MaintenanceConfigurator.ActualTable.row(row).data();
  
                  //Delete Dialog//
                  //Changing the Header label
                  var ctittle = "";
                  var ctittle = rowData.CurrentLookupLabel.trim() + " - Delete Confirmation";
                  $("#myModalLabel").html(ctittle);
                  //Changing the body question
                  var q = ""
                  $("#pcontentbody").html(q);
                  actualrowdata = rowData;
                  var deletefunction = Core.stringFormat('DeleteRate({0})', id);
                  $("#delete_btn_confirmation").attr("onclick", deletefunction);
                  $('#confirm-delete').modal('show');
              });
  
              //Make the genearal search only filter when the user hit enter in the button
              var inputgeneralfilter = $("div.dataTables_filter input");
  
              inputgeneralfilter.unbind();
              inputgeneralfilter.bind('keyup', function(e) {
                  if (e.keyCode == 13) {
                      table.search(this.value).draw();
                  }
              }); 
          }
  
      });
  
      return table;
  }
  

  Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  August 2016

  I don't immediately see why that would happen from the above code. Can you link to a page showing the issue so I can debug it please.

  Allan
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  Sorry, I can't show you the page, because company restrictions, but I am using it in a MVC application. So I have a view which have the table defined, in that view I included the js file that had the function to handle the datatable, all is working fine, except the twice call that the ajax do to the controller class to load the data. In the controller class I have a function that handle the data a return a json to the view with the data. I will give a breve description that I have to you can get more close to that I have actually:
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  View:

  using ModelClass

  <link href="@Url.Content("~/Content/bootstrap.min.css")" rel="stylesheet" />
  <link href="@Url.Content("~/Content/bootstrap-datetimepicker.min.css")" rel="stylesheet" />

  Text

  text

  text

  text

  Text

  text	text	text	text	text	text	text	text	text	text	text	text	text	text

  @{ R robj = new R(); string jsonString = robj.GetEmptyJsonObject(); } var r = @jsonString; var ttable = 0;

  
  
  
  
  <script type="text/javascript" src="@Url.Content("~/Scripts/STS/Maintenance/CRML.js")"></scrip>
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  JS File:

  var RRowData = null;
  $(document).ready(function () {
  ttable = 0;

  ...
  
  MC.ATable = s_getDataTable();
  
  MC.ATable.on('init.dt', function (e, settings, data) {
      var wrapper = $("#convResTabR");
      wrapper.fadeIn();
  });
  
  ...
  
  $("#outsearch_btn").click(function () {
      var trgeneralsearch = $("div.dataTables_filter input").val();
      MC.ATable.search(trgeneralsearch).draw();
  });
  

  });

  ...

  //Create the datatable
  function s_getDataTable() {
  var table = $('#convResTabR').DataTable({
  "serverSide": true,
  "orderMulti": false,
  "bProcessing": true,
  "order": [[3, "desc"], [1, "asc"]],
  "ajax": {
  "url": "/Maintenance/LoadData",
  "type": "POST",
  "data": function (d) {
  d.LoT = ttable;
  d.SO = r;
  },
  "datatype": "json"
  },
  "aoColumnDefs": [
  {
  "data": "DctN",
  "name": "D N",
  "visible": true,
  "aTargets": [0],
  "bSortable": true
  },
  {
  "data": "Conme",
  "name": "C N",
  "visible": true,
  "aTargets": [1],
  "bSortable": true
  },
  {
  "data": "TeN",
  "name": "T N",
  "visible": true,
  "aTargets": [2],
  "bSortable": true
  },
  {
  "data": "BgVdDate",
  "name": "B V D",
  "visible": true,
  "aTargets": [3],
  "bSortable": true,
  "mRender": function (data, type, full) {
  var result = "";
  if (data != null) {
  if (data.indexOf("Date") > -1) {
  var valueDate = new Date(parseInt(data.replace(/\/+Date(([\d+-]+))\/+/, '$1')));
  var curr_date = valueDate.getDate().toString();
  var curr_month = valueDate.getMonth() + 1; //Months are zero based
  var curr_year = valueDate.getFullYear().toString();
  result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
  }
  else
  result = data;
  }
  return result;
  }
  },
  {
  "data": "EVaD",
  "name": "E V D",
  "visible": true,
  "aTargets": [4],
  "bSortable": true,
  "mRender": function (data, type, full) {
  var result = "";
  if (data != null) {
  if (data.indexOf("Date") > -1) {
  var valueDate = new Date(parseInt(data.replace(/\/+Date(([\d+-]+))\/+/, '$1')));
  var curr_date = valueDate.getDate().toString();
  var curr_month = valueDate.getMonth() + 1; //Months are zero based
  var curr_year = valueDate.getFullYear().toString();
  result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
  }
  else
  result = data;
  }
  return result;
  }
  },
  {
  "data": "R",
  "name": "R",
  "visible": true,
  "aTargets": [5],
  "bSortable": true
  },
  {
  "data": "LA",
  "name": "Exc",
  "visible": true,
  "aTargets": [6],
  "bSortable": true
  },
  {
  "data": "SR",
  "name": "S R",
  "visible": true,
  "aTargets": [7],
  "bSortable": true
  },
  {
  "data": "CN",
  "name": "C N",
  "visible": true,
  "aTargets": [8],
  "bSortable": true
  },
  {
  "data": "CR",
  "name": "C R",
  "visible": true,
  "aTargets": [9],
  "bSortable": true
  },
  {
  "data": "CSR",
  "name": "C S R",
  "visible": true,
  "aTargets": [10],
  "bSortable": true
  },
  {
  "data": "LaUpdB",
  "name": "L U B",
  "visible": true,
  "aTargets": [11],
  "bSortable": true
  },
  {
  "data": "LaUpOn",
  "name": "L U O",
  "visible": true,
  "aTargets": [12],
  "bSortable": true,
  "mRender": function (data, type, full) {
  var result = "";
  if (data != null) {
  if (data.indexOf("Date") > -1) {
  var valueDate = new Date(parseInt(data.replace(/\/+Date(([\d+-]+))\/+/, '$1')));
  var curr_date = valueDate.getDate().toString();
  var curr_month = valueDate.getMonth() + 1; //Months are zero based
  var curr_year = valueDate.getFullYear().toString();
  result = curr_month + "/" + curr_date.toString() + "/" + curr_year;
  }
  else
  result = data;
  }
  return result;
  }
  },
  {
  "aTargets": [13],
  "data": "RId",
  "className": "center",
  "bSortable": false,
  "mRender": function (data, type, full) {
  var btn = Core.stringFormat('<button style="width:80px;font-size:10px;" type="button" data-role="edit" data-id="{0}" >Edit</button>', data);
  btn += Core.stringFormat('<button style="margin-top:5px;width:80px;font-size:10px;" type="button" data-role="delete" data-target="#confirm-delete" data-id="{0}">Delete</button>', data);
  return Core.stringFormat('

  {0}

  ', btn);
  }
  }],
  "fnDrawCallback": function () {
  var holder = $("#convResTabR").find("tbody");
  var btns;
  var btens;
  //Edit button
  btens = holder.find("button[data-role='edit']");
  btens.button({
  icons: {
  primary: " ui-icon-pencil"
  }
  });
  btens.off("click");
  btens.on("click", function () {
  var id = $(this).data("id");
  var row = $(this).closest("tr").get(0);
  // Get the data array for this row
  //var rowData = table.row(row).data();
  var rowData = MC.ATable.row(row).data();

              //Open Dialog to Edit//
              RRowData = rowData;
              uRt(id, ttable);
          });
  
          //delete btn
          btns = holder.find("button[data-role='delete']");
          btns.button({
              icons: {
                  primary: " ui-icon-trash"
              }
          });
          btns.off("click");
          btns.on("click", function () {
              var id = $(this).data("id");
              var row = $(this).closest("tr").get(0);
              // Get the data array for this row
              //var rowData = table.row(row).data();
              var rowData = MC.ATable.row(row).data();
  
              //Delete Dialog//
              //Changing the Header label
              var ctittle = "";
              var ctittle = rowData.CurrentLookupLabel.trim() + " - Delete Confirmation";
              $("#myModalLabel").html(ctittle);
              //Changing the body question
              var q = ""
              $("#pcontentbody").html(q);
              actualrowdata = rowData;
              var deletefunction = Core.stringFormat('DeleteRate({0})', id);
              $("#delete_btn_confirmation").attr("onclick", deletefunction);
              $('#confirm-delete').modal('show');
          });
  
          //Make the genearal search only filter when the user hit enter in the button
          var inputgeneralfilter = $("div.dataTables_filter input");
  
          inputgeneralfilter.unbind();
          inputgeneralfilter.bind('keyup', function(e) {
              if (e.keyCode == 13) {
                  table.search(this.value).draw();
              }
          });
      }
  
  });
  
  return table;
  

  }
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  Controller:

  [HttpPost]
  public ActionResult LoadData()
  {
  return LoadDataTableData(Request);
  }

      private ActionResult LoadDataTableData(HttpRequestBase r)
      {
          ///*GET PARAMETERS */
          //Getting the parameters for Paging
          var draw = r.Form.GetValues("draw").FirstOrDefault();
          var start = r.Form.GetValues("start").FirstOrDefault();
          var length = r.Form.GetValues("length").FirstOrDefault();
          //Getting the sort columns values
          var sortcolumn = r.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][data]").FirstOrDefault(); //Get the column name in the object
          //var sortcolumn = r.Form.GetValues("columns[" + Request.Form.GetValues("order[0][column]").FirstOrDefault() + "][name]").FirstOrDefault(); //Get the column name in the header
          var sorcolumndir = r.Form.GetValues("order[0][dir]").FirstOrDefault();
  
          int pagesize = length != null ? Convert.ToInt32(length) : 0;
          int skip = start != null ? Convert.ToInt32(start) : 0;
          int totalrecords = 0;
  
          //get the value that the usr pass in the general search
          var generalsearchresult = r.Form.GetValues("search[value]").FirstOrDefault();
  
          //get the table from the data is needed
          var stable = r.Form.GetValues("LookupTable").FirstOrDefault();
  
          if (stable != null) {
              LookupTableFilter FilterSortData = new LookupTableFilter();
  
              //Get the value of the general filter in the datatable
              FilterSortData.SetGeneralSearch(generalsearchresult);
  
              /*CREATING THE DICTIONARY OF COLUMNS NAMES*/
              var os = r.Form.AllKeys.Where(c => c.Contains("SO"));
              if (os != null) {
                  //Add the column only if it has a value for filter 
                  foreach (string item in os) {
                      string aux = item;
                      aux = aux.Replace("SO[", "");
                      aux = aux.Replace("]", "");
                      string searchvalue = r.Form.GetValues(item).FirstOrDefault();
                      if (!string.IsNullOrWhiteSpace(searchvalue) && !string.IsNullOrEmpty(searchvalue)) {
                          FilterSortData.AddComlumns(1, aux, searchvalue);
                      } 
                  }
              }
  
              /*CREATING THE DICTIONARY OF COLUMNS SORT*/
              //Creating the Dictionary of Sorting (Try to make it for more than one column)
              if (!(string.IsNullOrEmpty(sortcolumn) && string.IsNullOrEmpty(sorcolumndir)))
              {
                  FilterSortData.AddSorComlumns(1, sortcolumn, sorcolumndir);
                  //FilterSortData.SortColumnsNames.Add(1, sortcolumn);
                  //FilterSortData.SortComlumnsValue.Add(1, sorcolumndir);
              }
  
              ModelClassesFactory mcf = new ModelClassesFactory();
              var v = mcf.GetFilteredTableModel((LookupTable)Convert.ToInt32(stable), FilterSortData, pagesize, skip);
  
              totalrecords = mcf.CollectionTotal;
  
              JsonResult json = Json(new { draw = draw, recordsFiltered = totalrecords, recordsTotal = totalrecords, data = v.ToList() }, JsonRequestBehavior.AllowGet);
              return json;
          }
          else {
              var data = "{{}}";
              JsonResult json = Json(new { draw = draw, recordsFiltered = totalrecords, recordsTotal = totalrecords, data = data }, JsonRequestBehavior.AllowGet);
              return json;
          }
  
      }
  
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  That is the more close that I can get you, but the weird is why it is doing the twice calling from ajax.
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  Also the version of the datatable that I have is version 1.10.12
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  August 2016

  I don't immediately see anything from the above code and none of my examples appear to demonstrate this issue. Without being able to debug it myself, the best I can suggest is that you put a breakpoint into the code where the Ajax request is made (your ajax.data function might be the easiest place to do that) and look at the back trace to see what is causing the second draw to occur.

  Allan
• A95 Posts: 9Questions: 0Answers: 0

  August 2016

  Hi Allan, all fixed, was a section in my code that call it twice, sorry for the comment, is working perfect right now.
• allan Posts: 63,455Questions: 1Answers: 10,465 Site admin

  August 2016

  No worries - thanks for the update. Good to hear you have it working now!

  Allan