serverside pagination for datatable

md_sohail

          $('#parentTable').on( 'length.dt', function ( e, settings, len ) {
            console.log( 'New page length: ' + len );
            self.entriesPerpage = len;
            self.reRenderDataTable();

        } );
        $('#parentTable').on( 'page.dt', function () {
            const page = $('#parentTable').DataTable().page.info().page;
            console.log( 'PageNo: ' +  page );

            self.pageNumber = page;
            self.reRenderDataTable();
        } );



}


getAllPendingApprovals() {


    this.spinner.show();
    this.denoTableShow = false;

    const dataObj = {
        approvalLevel: this.approveLevel.toString(),
        category: this.category,
        domain: this.domain,
        entriesPerPage: this.entriesPerpage,
        extcode: '',
        extnwcode: this.extnwcode,
        extrefnum: '',
        geographicalDomain: 'Haryana',
        loginid: localStorage.loginId,
        msisdn: localStorage.msisdn,
        msisdn2: this.msisdnToSearch,
        pageNumber: this.pageNumber,
        password: localStorage.psword,
        pin: '1357',
        transferType: this.transferType,
        requestType : this.requestType,
        usernameToSearch: this.userNameToSearch
    };

         console.log('_dataObj', dataObj);

    this.api.c2cPendingApprovalListAPI(dataObj).subscribe(
        (res) => {
            console.log('HTTP response', res);
            if (res['statusCode'] === 200 && res['dataObject']['txnstatus'] === '200' ) {
                this.pendingApprovalList = res['dataObject']['transactionList'];

                console.log(this.pendingApprovalList);

                if (this.pendingApprovalList.length > 0) {
                    this.denoTableShow = true;
                     this.pendingApplovalListLength = this.pendingApprovalList.length;
                }
                this.dtTrigger.next();

            } else {
                this.pendingApprovalList = [];
                this.denoTableShow = false;
                this.responseMessage = res['message'];
            }
        },
        (err) => {
            console.log('HTTP Error', err);
            this.pendingApprovalList = [];
            this.denoTableShow = false;
            this.spinner.hide();
            this.responseMessage = err;
        },
        () => {
            console.log('HTTP request completed....');
            this.spinner.hide();
        }
    );



}


reRenderDataTable(): void {
    console.log('"reRenderDataTable" is called');

    if ($.fn.dataTable.isDataTable('#parentTable')) {
        $('#parentTable').DataTable().clear().destroy();
        console.log('table destroyed');

    }

    this.dtOptions = {
        info: true,
        autoWidth: false,
        serverSide: true,
        processing: true,
        scrollX: true,
        fixedColumns: {
            leftColumns: 1,
            rightColumns: 1,
        },

        order: [[1, 'asc']],
        destroy: true,

        pageLength: 10,
        lengthMenu: this.pageRowsLength,
        deferLoading: 1000,
        sDom: 'Rfrtlip',
        aoColumns: [
            null,
            null,
            null,
            null,
            null,
            null,
            // null,
            // null,
            // null,
            // null,

            { bSearchable: false },
        ],

        language: {
            paginate: {
                next:
                    '<img src="assets/images/pagination_arrows_right/12121212.png"  alt="arrow"/>',
                previous:
                    '<img src="assets/images/pagination_arrows_left/12121212.png" alt="arrow"/>',
            },
        },
    };        console.log('this.dtOptions', this.dtOptions);

        this.getAllPendingApprovals();

}

//above is my .ts file for datatables.

/////////////////

I have to perform server side pagination but showing these errors:
ERROR TypeError: Cannot set property 'data' of null
at _fnBuildAjax (jquery.dataTables.js:3952)
at _fnAjaxUpdate (jquery.dataTables.js:3969)
at _fnDraw (jquery.dataTables.js:3432)
at HTMLSelectElement.<anonymous> (jquery.dataTables.js:4856)
at HTMLSelectElement.dispatch (jquery.js:5429)
at HTMLSelectElement.elemData.handle (jquery.js:5233)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
at Object.onInvokeTask (core.js:27441)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)

kthorngren

ERROR TypeError: Cannot set property 'data' of null

You are defining 7 columns in Datatables. Do you have 7 columns in your HTML table?

Kevin