Page Methods and Datatable

afy65

New to this and been pulling my hair out a bit - just trying to get data into the grid as an initial tryout - perhaps someone could give me an example to work off - what I have done so far is! - probably wildly off

just looked and the pagemethod is not even being called

pagemethod is as follows

    [WebMethod]
    public static string GetUsers() {

        JavaScriptSerializer json = new JavaScriptSerializer();~~~~

        using (AdminEntities e = new AdminEntities()) {
            var result = (from u in e.Users select new { u.userID, u.userName, u.userFullName }).ToList();
            return json.Serialize(result);
        }
    }

and the script method is as follows:

    $("#datatable-table").dataTable({
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "default.aspx/GetUsers",
        "fnServerData": function (sSource, aoData, fnCallback) {
            $.ajax({
                "type": "POST",
                "contentType": "application/json; charset=utf-8",
                "dataType": 'json',
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        }
    });

anyway thank you in advance

bindrid

In a nutshell, you are using legacy code against a .net web method that has its own particularities.

Since your web method is returning all the data unfiltered, set serverSide to false (default) and let it handle sorting, paging, etc. When you have serverSdie true, you web method has do all of the sorting, paging etc.

I put some samples up in my GitHub for both serverSide:true and serverSide: false. These examples are as simple as I can make them but they all work inside my development environment.

This work based on 1.10+

https://github.com/bindrid/DataTablesServerSide

allan

Unless you are working with many tens of thousands of records I would suggest you remove the bServerSide option (serverSide as it is now called).

Once that is done, let us know what the JSON data from the server looks like.

Allan

afy65

Hi All
Sorry for the delay - have been in meetings this week and not had much time to look at your suggestions - will take a peek this evening and thanks for you comments.

Dan

afy65

Hi Allan
Now getting the following error after trying what you said

Uncaught TypeError: Cannot read property 'length' of undefined
at jquery.dataTables.min.js:47
at Object.j [as success] (jquery.dataTables.min.js:34)
at j (jquery.min.js:2)
at Object.fireWith [as resolveWith] (jquery.min.js:2)
at x (jquery.min.js:4)
at XMLHttpRequest.<anonymous> (jquery.min.js:4)

aoData seems to be empty, but the webmethod is being called.

Thanks for your help anyway

kthorngren

That message usually means there is a mismatch between the number of columns in your table and your Datatables config. Please post your HTML showing the table, your javascript and the JSON response.

Kevin

afy65

Hi kevin
HTML is as follows:

<div class="content container">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="body">
                    <section>
                        <table id="datatable-table" class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Fullname</th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                    </section>
                    <div class="well well-sm" style="margin-top: 10px; text-align: right; margin-bottom: 2px;">
                        <div id="add" class="btn btn-default">Add</div>
                        <div id="delete" class="btn btn-danger">Delete</div>
                    </div>
                </div>
                <div class="loader-wrap hiding hide">
                    <i class="fa fa-circle-o-notch fa-spin"></i>
                </div>
            </div>
        </div>
    </div>

javascript is as follows:

        $(document).ready(function () {
            $("#datatable-table").dataTable({
                "bProcessing": true,
                "bServerSide": false,
                "sAjaxSource": "default.aspx/GetUsers",
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "type": "POST",
                        "contentType": "application/json; charset=utf-8",
                        "dataType": 'json',
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                }
            });
        });

webmethod is as follows:

 public static string GetUsers() {

            JavaScriptSerializer json = new JavaScriptSerializer();

            using (AdminEntities e = new AdminEntities()) {
                var result = (from u in e.Users select new { u.userID, u.userName, u.userFullName }).ToList();
                return json.Serialize(result);
            }
        }

The json returned from the web method is as follows (I know is all the same username, i just cut and paste into the database to get going):

[{\"userID\":42,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":43,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":45,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":47,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":48,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":54,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"}]"

not sure the backslashes should be there tbh?

edit: this is the debugger in vs putting the backslash in - its is as follows:

[{"userID":42,"userName":"daffleck","userFullName":"Daniel Affleck"},{"userID":43,"userName":"daffleck","userFullName":"Daniel Affleck"},{"userID":45,"userName":"daffleck","userFullName":"Daniel Affleck"},{"userID":47,"userName":"daffleck","userFullName":"Daniel Affleck"},{"userID":48,"userName":"daffleck","userFullName":"Daniel Affleck"},{"userID":54,"userName":"daffleck","userFullName":"Daniel Affleck"}]

Thanks for your help in advance

Dan

allan

Try this:

$(document).ready(function () {
    $("#datatable-table").DataTable({
        processing: true,
        ajax: {
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            url: 'default.aspx/GetUsers',
            dataSrc: ''
        }
    });
});

I've used the current options rather than the legacy ones you had in your example above. Also I've used ajax.dataSrc set to be an empty string which is key to make DataTables read a plain array of data, rather than expecting the array to be nested in an object.

If that doesn't resolve it, could you use the debugger to let us see the JSON data response.

Thanks,
Allan

afy65

Hi Allan
This does, nowt.......grrrrrh. 'No Data in table' lol.
Feel im being stupid or something
Debugger gave me this json response:

{
    "d": "[{\"userID\":42,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":43,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":45,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":47,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":48,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"},{\"userID\":54,\"userName\":\"daffleck\",\"userFullName\":\"Daniel Affleck\"}]"
}

and Server Data function:

1 null

Thank you

Dan

bindrid

@afy65 , just from that last post I see you are using .net web method and that you are serializing your data and returning it as a string from that web method. You are serializing your data twice. Once you explicitly and once by the scripting services that you uncommented at the top of your asmx file.

bindrid

Step 1: let your web method return the object, don't serialize it.
Step 2: Try @allan suggestion with a slight modification

$(document).ready(function () {
    $("#datatable-table").DataTable({
        processing: true,
        ajax: {
            type: 'post',
            contentType: 'application/json; charset=utf-8',
            url: 'default.aspx/GetUsers',
            dataSrc: 'd'
        }
    });
});

I have some sample code of all this at https://github.com/bindrid/DataTablesServerSide

afy65

Hi
This does not work either - will look at it again tomorrow as tired as a tired thing

thanks anyway.

bindrid

I would like to see your web method that you are calling along with your current  $("#datatable-table").DataTable

bindrid

are you still not using 1.10 + ?

allan

One more modification from @bindrid's code - replace:

dataSrc: 'd'

with:

dataSrc: function ( json ) {
  return $.parseJSON( json.d );
}

Without that you would just be giving DataTables the string representation of the JSON data. It needs to be parsed into a real JSON object.

I've never understood why .NET wraps JSON in d and makes it string - it seems utterly redundant, but I'm sure it is useful somewhere...

Regards,
Allan

Daniel Kvaternik

[posted comment in wrong thread]