how to use $scope.dtInstance.DataTable.page(page).draw(false) to stay in current page after update

sonali12

how to use $scope.dtInstance.DataTable.page(page).draw(false) to stay in current page after data table row update.

colin

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

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

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

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

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

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

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

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

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

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

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

};