hello i use datatble but my data loading performance is slow ...so how to improve means i have more

hello i use datatble but my data loading performance is slow ...so how to improve means i have more

RbberRbber Posts: 6Questions: 1Answers: 0

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

This question has an accepted answers - jump to answer

Answers

  • RbberRbber Posts: 6Questions: 1Answers: 0

    hello, i use datatable but my performance is slow so how to improve that ...menas if there is more data then performance is slow

    function InitTableFC() {
    // debugger;
    tableFC = $('#tableFC').DataTable({
    dom: 'Rrtip',
    paging: true,
    pageLength: 25,

      // serverSide: true,
      //  orderCellsTop: true,
        fixedHeader: true,
        searching: true,
       // bInfo: false,
       // bSort: true,
        //colReorder: {
        //    'allowReorder': false
        //},
        "bDestroy": true,
      //  bAutoWidth: true,
        scrollX: '100%',
        scrollY: '58vh',
        scrollCollapse: true,
        language: {
            "zeroRecords": "",
            "emptyTable": "",
            "paginate": {
                "previous": "<",
                "next": ">"
            }
            //,search: '<i class="fa fa-search" aria-hidden="true" style="margin-right:20px"></i>',
            //searchPlaceholder: 'Search...'
        },
        "columnDefs": [
            { "targets": 3, "orderDataType": "dom-text", type: 'string' },
            { "targets": 4, "orderDataType": "dom-text", type: 'string' },
            { "targets": 5, "orderDataType": "dom-text", type: 'string' },
            { "targets": [0, 6], "searchable": false },
            {
                "targets": [0, 6], //first column / numbering column
                "orderable": false, //set not orderable
            },
            { width: 70, targets: 0 },
            { width: 150, targets: 1 },
            { width: 150, targets: 2 },
            { width: 150, targets: 3 },
            { width: 250, targets: 4 },
            { width: 39, targets: 11 },
            { width: 70, targets: 13 },
            { width: 70, targets: 18 },
            { width: 110, targets: 10 }
        ],
        "deferRender": true,
      //  FixedColumns: true,
        //order: [
        //    [2, 'asc']
        //],
        //search: {
        //    "caseInsensitive": true
        //},
        initComplete: (settings, json) => {
            $('.dataTables_paginate').insertAfter('div#tablePaginationDiv');
        },
    });
    
    // Set table search
    $('#tableSearchFC').on('input', function (e) {
        updateTableFCIndexSearch();
    });
    $("#inputSelectAllFC").on("change", function () {
        var checked = $(this).prop("checked");
        tableFC.rows({ filter: 'applied' }).every(function (rowIdx, tableLoop, rowLoop) {
            cell = tableFC.cell({ row: rowIdx, column: 0 }).node();
            input = $('input', cell);
            input.prop("checked", checked);
        });
        tableFC.draw();
    
        colorDatatableAllRow(tableFC);
    });
    

    } this is my code

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin
    Answer ✓

    Can you post a link to the page that shows the issue please? That is required in the forum rules and indicated in the template text you didn't fill out.

    I would need to be able to use a browser's profiler on the page to understand why performance is poor on your page.

    Allan

  • RbberRbber Posts: 6Questions: 1Answers: 0

    sorry I cant share the link because of company privacy...i shere the code

  • RbberRbber Posts: 6Questions: 1Answers: 0

    see when i reload the page my datatable takes more time to load

  • RbberRbber Posts: 6Questions: 1Answers: 0

    function InitTableFC() {
    // debugger;
    tableFC = $('#tableFC').DataTable({
    dom: 'Rrtip',
    paging: true,
    pageLength: 25,
    serverSide: true, // Enable server-side processing

      // serverSide: true,
      //  orderCellsTop: true,
        fixedHeader: true,
        searching: true,
       // bInfo: false,
       // bSort: true,
        //colReorder: {
        //    'allowReorder': false
        //},
        "bDestroy": true,
      //  bAutoWidth: true,
        scrollX: '100%',
        scrollY: '58vh',
        scrollCollapse: true,
        language: {
            "zeroRecords": "",
            "emptyTable": "",
            "paginate": {
                "previous": "<",
                "next": ">"
            }
            //,search: '<i class="fa fa-search" aria-hidden="true" style="margin-right:20px"></i>',
            //searchPlaceholder: 'Search...'
        },
        "columnDefs": [
            { "targets": 3, "orderDataType": "dom-text", type: 'string' },
            { "targets": 4, "orderDataType": "dom-text", type: 'string' },
            { "targets": 5, "orderDataType": "dom-text", type: 'string' },
            { "targets": [0, 6], "searchable": false },
            {
                "targets": [0, 6], //first column / numbering column
                "orderable": false, //set not orderable
            },
            { width: 70, targets: 0 },
            { width: 150, targets: 1 },
            { width: 150, targets: 2 },
            { width: 150, targets: 3 },
            { width: 250, targets: 4 },
            { width: 39, targets: 11 },
            { width: 70, targets: 13 },
            { width: 70, targets: 18 },
            { width: 110, targets: 10 }
        ],
        "deferRender": true,
      //  FixedColumns: true,
        //order: [
        //    [2, 'asc']
        //],
        //search: {
        //    "caseInsensitive": true
        //},
        initComplete: (settings, json) => {
            $('.dataTables_paginate').insertAfter('div#tablePaginationDiv');
        },
    });
    
    // Set table search
    $('#tableSearchFC').on('input', function (e) {
        updateTableFCIndexSearch();
    });
    $("#inputSelectAllFC").on("change", function () {
        var checked = $(this).prop("checked");
        tableFC.rows({ filter: 'applied' }).every(function (rowIdx, tableLoop, rowLoop) {
            cell = tableFC.cell({ row: rowIdx, column: 0 }).node();
            input = $('input', cell);
            input.prop("checked", checked);
        });
        tableFC.draw();
    
        colorDatatableAllRow(tableFC);
    });
    

    }

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    There really isn't much I can do without being able to see it. I don't know how much data you are loading, the size of each data point, etc. Please create a test case showing the issue on JSFiddle or similar if you can't link to your own page. I need to be able to run a profiler on it to understand where the slow down is coming from.

    I notice also that the second code is significantly different from the original that you posted. For example you have server-side processing enabled. That changes everything.

    I can't debug what I can't see. Sorry.

    Allan

  • RbberRbber Posts: 6Questions: 1Answers: 0

    see i have more than 900 rows

  • allanallan Posts: 63,498Questions: 1Answers: 10,470 Site admin

    That shouldn't cause a DataTable to slow down.

    I can't help without a test case to profile I'm afraid. I'd like to, and I'm not just being difficult for no purpose. I actually genuinely can't help without a test case.

    Allan

Sign In or Register to comment.