Page Methods and Datatable

Page Methods and Datatable

afy65afy65 Posts: 6Questions: 1Answers: 0

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

Answers

  • bindridbindrid Posts: 582Questions: 0Answers: 89
    edited July 8

    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

  • allanallan Posts: 43,134Questions: 1Answers: 5,608 Site admin

    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

  • afy65afy65 Posts: 6Questions: 1Answers: 0

    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

  • afy65afy65 Posts: 6Questions: 1Answers: 0
    edited July 14

    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

  • kthorngrenkthorngren Posts: 1,565Questions: 18Answers: 322

    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

  • afy65afy65 Posts: 6Questions: 1Answers: 0
    edited July 14

    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 :)

  • allanallan Posts: 43,134Questions: 1Answers: 5,608 Site admin

    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

  • afy65afy65 Posts: 6Questions: 1Answers: 0

    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 ;)

  • bindridbindrid Posts: 582Questions: 0Answers: 89

    @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.

  • bindridbindrid Posts: 582Questions: 0Answers: 89
    edited July 14

    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

  • afy65afy65 Posts: 6Questions: 1Answers: 0

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

    thanks anyway.

  • bindridbindrid Posts: 582Questions: 0Answers: 89

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

  • bindridbindrid Posts: 582Questions: 0Answers: 89

    are you still not using 1.10 + ?

  • allanallan Posts: 43,134Questions: 1Answers: 5,608 Site admin

    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

Sign In or Register to comment.