How to manage datatable for large data

Question

I have a datatable for report. When i tried to show my datas, My browser freezed or crashed. My js code on below

Reporting_Report.DTReport = $('#Report-ReportTable').DataTable({
    "ajax": {
        "url": "/Ajax/JsonProvider?Method=HardwareHostScreenUsage&GenericObject=true&Json=" + JSON.stringify(json),
        "dataSrc": ""
    },
    "columns": [
        {
            "data": "BranchName",
            "sTitle": "BranchName"
        },
        {
            "data": "HardwareHostFriendlyName",
            "sTitle": "Hardware Host Friendly Name"
        },
        {
            "data": "HardwareHostScreenUsageScreenState",
            "defaultContent": "N/A",
            "sTitle": "Hardware Host Screen Name"
            "render": function(data, type, full) {
                if (data && Util.Check.IsInteger(data)) {
                    if (data == 1) {
                        return "Sorry Screen";
                    } else if (data == 2) {
                        return "Welcome Screen";
                    } else if (data == 3) {
                        return "Progress Screen";
                    }
                }
            }
        },
        {
            "data": "HardwareHostScreenUsageSecondOnScreen",
            "sTitle": "Elapsed Time On Hardware Host Screen"
        },
        {
            "data": "HardwareHostScreenUsageRecordDate",
            "sTitle": "Hardware Host Screen Usage Record Date"
            "render": function (data, type, full) {
                return Util.JsonDateToDate(data).format("dd.mm.yyyy HH:MM:ss");
            }
        }
    ],
    "pageLength": 20,
    "lengthMenu": [
        [20, 50, 100, -1],
        [20, 50, 100, "All"]
    ],
    "info": false,
    bFilter: true,
    bInfo: false,
    "order": [[0, "asc"]],
    "scrollX": true,
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'copy'
        },
        {
            extend: 'csv'
        },
        {
            extend: 'excel'
        },
        {
            extend: 'pdf',
            title: "Detailed Ticket Report"
            message: startDate + " " + startTime + " - " + endDate + " " + endTime + "\t" + datetime,
            pageSize: 'LEGAL'
        },
        {
            extend: 'print'
        }
    ]
});

I have more than 100.000 datas.

I thinked maybe i can just get showing page datas and total data number(for manage page numbers) and when clicked another page number send new query and get new datas. But i couldn't find how to do that to.(maybe it cause some another problems (shorting, searching vs.)

Have you got any ideas and solutions.(or this problem has already a solution)

footnote:json has some filters for query(time, branch, etc.)

HardwareHostScreenUsage method gets my datas on c# side.

Answer 1

you can use client side data source also-

var mydata = [];
$('#example').DataTable({
    data:           data,
    deferRender:    true,
    scrollY:        200,
    scrollCollapse: true,
    scroller:       true
});

fetch all data at once from server and show it while scrolling the table .

You Need these library -

https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js https://cdn.datatables.net/scroller/1.4.3/js/dataTables.scroller.min.js