Use client side if under 1000 rows else server side

kkittell518

I have a web page where a user can run several different queries. When the results are over 1000, I'd like to use server-side processing, and when it's less, I'd like to use client side. I can run each query successfully if only one of the tables is in the javascript. When I have both, the server-side table is ignored. For client-side, I put it into an asp gridview first, because I don't know how many, or what the columns are. In my c# code, I null the datasource for gridview if I want it server-side, but that's what it loads anyway.
First, can I do this, and if so, what do I need to do so that $('#resultsS').DataTable is loaded and not the gridview table?
Thank you.
Here's my code:

   function getData(cb_func) {
        $.ajax({
            url: "results.txt",
            success: cb_func
        });
    }

    function capitalizeFirstLetter(string) {
        return string.charAt(0).toUpperCase() + string.slice(1);
    }

    $(document).ready(function () {
        getData(function (data) {
            var columns = [];
            data = JSON.parse(data);
            columnNames = Object.keys(data.data[0]);
            for (var i in columnNames) {
                columns.push({
                    data: columnNames[i],
                    title: capitalizeFirstLetter(columnNames[i])
                });
            }
            $('#resultsS').DataTable({
                dom: 'Bfirtip',
                data: data.data,
                columns: columns
            });
        });
        $('#<%= gvResults.ClientID %>').DataTable({
            dom: 'Bfirtip',
            columnDefs: [
                {
                    type: 'natural-nohtml', targets: '_all'
                }
       });
    });

rf1234

I don't understand your code to be honest. You don't say serverSide: true anywhere. So what do you mean with serverSide?
https://datatables.net/reference/option/serverSide

I also use the same DataTable with serverSide: true or false. Works fine. In your case you would need to know how many records will be displayed BEFORE data table initialization, e.g. by making an ajax call. Then you can decide whether or not to set serverSide to true or false.

My code is pretty simple:

var serverSide = false;
if ( pageWithServerSide ) {
    serverSide = true;
}

var table = $('#myTable').DataTable({
    dom: 'Bfrltip', 
    serverSide: serverSide,  .....

allan

You'll need to make an Ajax request to the server to tell if server-side processing should be enabled or not (i.e. ask the server how many rows there are). You could optionally have that request return the data to display if it is less than 1k rows, and then just display that using the data option.

Allan

kkittell518

I can't use the same table for server-side and client-side, since I don't know what or how many columns, so I use an asp:gridview, then convert to client-side table.

rf1234

Then use different ones. No problem. But you need to know how many records you will have to make the decision on which table to initialize.
Again: I don't see serverSide: true anywhere in your code.

kkittell518

I'm using code from http://live.datatables.net/fafuyeyu/55/edit as the example for my table. I figured out the issue was that I had the end of the $(document).ready(function () { in the wrong place. I'm determining number of rows in my c# code.
Works like a charm now.

rf1234

Actually I had no clue what you were doing: But sometimes it helps just to talk about it !! Great you got it working !

Roland