Answers

• glenderson Posts: 231Questions: 11Answers: 29

  February 2016

  When I update data in a table that already exists, I don't loose search, filter, paging, etc. But, it might be a very different way of doing this than you seen before.

  When my table is first drawn, each row has an ID given to it, usually something like "tablename_row_[id]" where id is the unique row id in the database, this is important because we'll use jquery to locate the row later on.

  When I update a row, my ajax method returns a script. jquery being smart, runs the script. Inside the script it looks for the table id, if found, it then looks for the row id, if found, the script uses the .draw() method to update the cells. If the row is not found, the script use the .add() method to insert a new row.

  In my ajax method, my sql statement will only pull back the rows that have changed based upon a timestamp or id (depends upon what I'm doing).

  Because I'm returning a script, I can add a jquery animation to change the rows background color to "flash" the row(s) that are changing or highlight just a single row if it was an edit.

  Keep in mind, that I didn't write any of the following script, it's all done by a class I wrote.

  Table Instantiation

  var recurringtable=$jq("#recurringtable").DataTable({
     "deferRender": false
     , "language": {
         "processing":"<div class=\"three-quarters-loader\"></div>"
         }
    , lengthMenu:[[10,25,50,100,-1],[10,25,50,100,"All"]]
    , "pageLength":15
    , pagingType: "full_numbers"
    , "ajax": {
                    url: "myajaxpage.aspx?myoptions to make this work"
                  , dataType: "json" 
                  ,  complete: function() {
                       paintcheckboxes("recurringtable")
                     }
                  , error: function (xhr, error, thrown) {
                                 alert("An error occurred while attempting to retrieve data via ajax.\n"+thrown );
                               }
    ,           }
    , "columns": [
       { "className":"tddiv center"}
      ,{ "className":"tddiv center"}
      ,{ "className":"tddiv center"}
      ,{ "className":"tddiv center"}
      ,{ "className":"tddiv center"}
      ,{ "className":"tddiv center"}
      ,{ "className":"tddiv center"}
      ]
    , "order": [[2,"asc"]]
  , dom:  'lfrtip'
  });
  

  Example of json data returned by new table request. All onClick actions are bound at the table level

  {
  "DT_RowId":"recurring_1000",
  "DT_RowAttr":{"data-recurringid":"1000"}
  ,"0":"01/27/2016"
  ,"1":"<span class=\"anchorline_offblack editTime\">(default)</span>"
  ,"2":"Past"
  ,"3":"<span class=\"anchorline_offblack editLocation\">(default)</span>"
  ,"4":"---"
  ,"5":"<input class=\"editcancel\" type=\"checkbox\"  >"
  ,"6":"<img class=\"sprite minusbox\" src=\"/images/transparent.gif\" title=\"Remove Recurring Event\" alt=\"recurring\" >"
  },
  

  Here is what's returned from the ajax method if it's an update or insert. Again, I write none of this, it's all done by the class api. In my ajax call, I would include an option if it's an update based upon timeChange, or edit by an row id.

  <script>
  // jsonMethod: isUpdate
  if($jq("#recurringtable").length) {
    console.log("Table was found");
    var table = $jq("#recurringtable").DataTable()
    console.log("Length of recurring_1048: " + $jq("#recurring_1048").length);
    if($jq("#recurring_1048").length) {
      var row_id=$jq("#recurringtable").dataTable().fnGetPosition($jq("#recurring_1048")[0]);
      console.log("Row Found, ID: "+row_id);
    } else {
      var row_id=-1;
      console.log("Row Not Found");
    };
    console.log("row_id is " + row_id);
    if (row_id>=0) {
      var d = table.row("#recurring_1048").data();
      d[0]="02/10/2016";
      d[1]="<span class=\"anchorline_offblack editTime\">(default)</span>";
      d[2]="Future";
      d[3]="<span class=\"anchorline_offblack editLocation\">New Location</span>";
      d[4]="---";
      d[5]="<input class=\"editcancel\" type=\"checkbox\"  >";
      d[6]="<img class=\"sprite minusbox\" src=\"/images/transparent.gif\" title=\"Remove Recurring Event\" alt=\"recurring\" >";
      table.row("#recurring_1048").data(d);
      table.row("#recurring_1048").draw();
    } else {
      table.row.add({
      "DT_RowId":"recurring_1048",
      "DT_RowAttr":{"data-recurringid":"1048"}
      ,"0":"02/10/2016"
      ,"1":"<span class=\"anchorline_offblack editTime\">(default)</span>"
      ,"2":"Future"
      ,"3":"<span class=\"anchorline_offblack editLocation\">New Location</span>"
      ,"4":"---"
      ,"5":"<input class=\"editcancel\" type=\"checkbox\"  >"
      ,"6":"<img class=\"sprite minusbox\" src=\"/images/transparent.gif\" title=\"Remove Recurring Event\" alt=\"recurring\" >"
      }).draw();
    };
  
  paintcheckboxes("recurring_1048");
  
  $jq("#recurringtable tr.selected").removeClass("selected");
  if (!$jq("#recurring_1048").hasClass("selectedrow")) {
    table.page.jumpToData("recurring_1048",0);
    $jq("#recurring_1048").addClass("selected selectedrow"); 
     if (!$jq("#recurring_1048").visible()) {
       var divPosition = $jq("#recurring_1048").offset();
       if (divPosition) {
         $jq("html, body").animate({scrollTop: divPosition.top}, "slow", function(){
           if ($jq("#psmenu").is(":visible") && $jq("#psmenu").visible()==false) {
             fitonscreen("psmenu",true);
           }
         });
       } else {
         console.log("Could not reposition table for [recurring_1048], offset is [" + divPosition + "].");
       }
     }
   }
  } else {
    alert("Table recurringtable was not located.");
  }
  </script>