Answers

• colin Posts: 15,238Questions: 1Answers: 2,599

  March 2018

  Hi sonali12,

  If you pass in page, instead of false, i.e.

  $scope.dtInstance.DataTable.page(page).draw('page')
  

  then that will keep the ordering and the search as it was. See draw() for more info.

  Cheers,

  Colin
• colin Posts: 15,238Questions: 1Answers: 2,599

  March 2018 Answer ✓

  Hi sonali12,

  The code you have for the draw() would also work, both false and 'page' keeps the paging as it is.

  When you say "after data table row update", does that also issue a draw?

  Thanks,

  Colin
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  yes.again it draws all the data from table.so please give idea where to make this draw false.Coded below but dtinstance showing undefined.

  .withOption('stateSaveCallback', function (settings, data) {

          console.log("Save callback");
          var page = dtInstance.DataTable.page();
          console.log('page2',page);
         $scope.dtInstanceCallbackVDR = function (dtInstance) {
          var page = dtInstance.DataTable.page();
          console.log('page2',page);
          }
  
          var i = data.columns.map(function(o){
  
              o.search.search = "";
              return;
          });
  
          settings.sInstance.columns = i;
          localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data));
      })
  
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  For more info:

  $scope.dtInstanceCallbackVDR = function (dtInstance) {

      $scope.vdrDtInst = dtInstance.DataTable.on('draw.dt', function () {
          let elements = angular.element(".uncompiled");
          angular.forEach(elements, function (element) {
              $compile(element)($scope)
  
          })
  
          $scope.$apply(function () {
  
              $scope.loading = false;
              $scope.piHider = false;
  
              console.log("shown");
          });
  
      });
  
       dtInstance.DataTable.on('page.dt', function () {
              $scope.$apply(function () {
  
  
                  $scope.loading = true;
                  $scope.piHider = true;
  
              })
          });
  
          dtInstance.DataTable.on('length.dt', function () {
              $scope.$apply(function () {
                  $scope.loading = true;
                  $scope.piHider = true;
              })
          });
  
          dtInstance.DataTable.on('column-visibility.dt', function () {
              $scope.$apply(function () {
                  $scope.loading = true;
                  $scope.showGrid();
                  $scope.piHider = true;
              })
          });
  
  
          dtInstance.DataTable.on('search.dt', function () {
              $scope.loading = true;
              $scope.piHider = true;
          });
  }
  
• allan Posts: 63,332Questions: 1Answers: 10,436 Site admin

  March 2018 Answer ✓

  I don't actually see the .draw(false) in your code chunks above, but that should keep the page in place - here is a trivial example: http://live.datatables.net/migexeve/1/edit .

  Can you link to a test case showing the issue please?

  Allan
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  These are the options:
  (function() {

       $scope.dtOptionsVDR = DTOptionsBuilder.newOptions()
      .withOption('ajax', {
          url: BASE_URL+'/dt/grid?itotrainid=' + $scope.row.ITOTRAIN_ID+"&userid="+localStorage.getItem("userid")+"&projectid="+localStorage.getItem("projectname") + "&template=" +  $scope.tempID + "&product="+ $scope.product + "&datediff=",
          type: 'GET'
      })
  
      .withDataProp('data')
      .withOption('stateSave', true)
     .withOption('stateSaveCallback', function (settings, data) {
  
          console.log("Save callback");
          //var page = dtInstance.DataTable.page();
          //console.log('page2',page);
          /*$scope.dtInstanceCallbackVDR = function (dtInstance) {
          var page = dtInstance.DataTable.page();
          $scope.dtInstance.DataTable.page(page).draw(false)
          console.log('page2',page);
          }*/
          //settings.oSavedState.search.search = settings.oSavedState.search.search.trim();
          //settings.oPreviousSearch.sSearch =  settings.oPreviousSearch.sSearch.trim();
          //console.log("SearcData",settings.oSavedState.search.search);
  
          var i = data.columns.map(function(o){
  
              o.search.search = "";
              return;
          });
  
          settings.sInstance.columns = i;
          localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data));
      })
  
  
  
      .withOption('stateLoadCallback', function (settings) {
  
          return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance))
      })
      .withOption('processing', false)
      .withOption('serverSide', true)
      .withOption('lengthChange', false)
      .withOption('fnInitComplete', function () {
          angular.element(this).wrap('<div class="dataTablescrollBody"></div>');
          angular.element('.dt-button-collection').attr('style', 'background-color:red');
  
  
      })
      .withOption('rowCallback', vdrRowCallback)
      .withButtons([
          'colvis'
      ])
  
  
  })();
  

  =========dtInstanceCallback================
  $scope.dtInstanceCallbackVDR = function (dtInstance) {

      $scope.vdrDtInst = dtInstance.DataTable.on('draw.dt', function () {
          let elements = angular.element(".uncompiled");
          angular.forEach(elements, function (element) {
              $compile(element)($scope)
  
          })
  
          $scope.$apply(function () {
             // var page = dtInstance.DataTable.page();
             //$scope.dtInstance.DataTable.page(page).draw(false)
              //console.log('page2',page);
              $scope.loading = false;
              $scope.piHider = false;
  
              console.log("shown");
          });
  
      });
      dtInstance.DataTable.on('page.dt', function () {
              $scope.$apply(function () {
  
  
                  $scope.loading = true;
                  $scope.piHider = true;
  
              })
          });
  
          dtInstance.DataTable.on('length.dt', function () {
              $scope.$apply(function () {
                  $scope.loading = true;
                  $scope.piHider = true;
              })
          });
  
          dtInstance.DataTable.on('column-visibility.dt', function () {
              $scope.$apply(function () {
                  $scope.loading = true;
                  $scope.showGrid();
                  $scope.piHider = true;
              })
          });
  
  
          dtInstance.DataTable.on('search.dt', function () {
              $scope.loading = true;
              $scope.piHider = true;
          });
  }
  
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  i have added $scope.dtInstance.DataTable.page(page).draw(false);in both .withOption('stateSaveCallback') function and $scope.vdrDtInst = dtInstance.DataTable.on('draw.dt') but its not working any where.
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  if you want i wil send you the whole page code but please help me out from this issue.
  One thing do i need to put below codes as i am calling service again during row update.

  [code]
  /* in Datatables */
  if ( bResetDisplay )
  {
  oSettings._iDisplayStart = 0;
  }
  [/code]
  and

  [code]
  /* when updating the table /
  bResetDisplay = false; / override default behaviour /
  oTable.fnDraw();
  bResetDisplay = true; / restore default behaviour */
  [/code]
• allan Posts: 63,332Questions: 1Answers: 10,436 Site admin

  March 2018 Answer ✓

  Hang on - you are calling $scope.dtInstance.DataTable.page(page).draw(false) inside the state save callback?

  That's going to end up with an infinite loop since a draw will trigger a state save. I'd suggest removing that line.

  Allan
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  Thanks..yeah i faced that issue and removed that $scope.dtInstance.DataTable.page(page).draw(false) inside the state save callback.But please suggest where to put that code?
• sonali12 Posts: 12Questions: 2Answers: 0

  March 2018

  Do i have to add something like below?

  $.fn.dataTableExt.oApi.fnStandingRedraw = function(oSettings) {
  //redraw to account for filtering and sorting
  // concept here is that (for client side) there is a row got inserted at the end (for an add)
  // or when a record was modified it could be in the middle of the table
  // that is probably not supposed to be there - due to filtering / sorting
  // so we need to re process filtering and sorting
  // BUT - if it is server side - then this should be handled by the server - so skip this step
  if(oSettings.oFeatures.bServerSide === false){
  var before = oSettings._iDisplayStart;
  oSettings.oApi._fnReDraw(oSettings);
  //iDisplayStart has been reset to zero - so lets change it back
  oSettings._iDisplayStart = before;
  oSettings.oApi._fnCalculateEnd(oSettings);
  }

  //draw the 'current' page
  oSettings.oApi._fnDraw(oSettings);
  

  };