如何使用AJAX与Web方法一起使用asp.net将JSON对象发送到jQuery DataTable？

Question

So I have the jQuery datatable using AJAX to call for the JSON in this format.

 $(document).ready(function () {

            $('#test').DataTable({
                ajax:{
                    url:"players.json",
                    dataSrc:""
                  },
                columns: [
                    {data: "id"},
                    { data: "player" },
                    { data: "points" },
                    { data: "steals" },
                    { data: "blocks" },
                    { data: "assists" },
                    { data: "MPG" },
                    { data: "shot %" },
                    { data: "3 %" }
                ]


            });
        });

My aspx.cs file has a method to create the JSON file which works.

[System.Web.Services.WebMethod]
        public static void loadTable()
        {
            NBAPlayerRepository players = new NBAPlayerRepository();
            DataTable dt = players.GetAll();
            var json = dt.ToJson();
            System.IO.File.WriteAllText(@"C:\Users\wheres\Downloads\nbaStats\nbaStats\nbaStats\players.json", json);
        }

And the JSON looks like this:

[{"id" : "67926aa7-46b7-4418-96db-fc7e5216aac4","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "33.3429985046387"}
,{"id" : "6dc42e0b-8750-463d-a9ef-5a025a27154b","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"}
,{"id" : "f727130c-5b94-4730-a653-cfb603c73b8a","playername" : "Wilson Heres","points" : "34534","steals" : "34","blocks" : "34","assists" : "343","mpg" : "343","shootingpercentage" : "33.3429985046387","threepointpercentage" : "343.334014892578"}
]

But now I am getting this error "jquery.dataTables.min.js:48 Uncaught TypeError: Cannot read property 'length' of undefined"

Edit: This all works now. Just had to add dataSrc:""

Answer 1

Cleaned-up version of your DataTables initialization

 $(document).ready(function () {

        $('#test').DataTable({
            ajax: {
                url: "players.aspx/loadTable"
            },
            columns: [
               { data: "id" },
               { data: "player" },
               { data: "points" },
               { data: "steals" },
               { data: "blocks" },
               { data: "assists" },
               { data: "MPG" },
               { data: "Shot %" },
               { data: "3 %" },
            ]

    });
});

This may seem like a lot of stuff was removed from your code, so let me make some explanations/assumptions about what was changed.

Assumptions

• First, an assumption: DataTables will always try to use a GET request, not a POST when first getting the data from the table, so make sure that your data processing code expects that.
• I also am assuming that you have no strong desire to have your Ajax separate from your initialization and that was just how you decided to do it as a first attempt. If that is the case, let me know and I'll update the code to match that.

Explanation

Your formatting is incorrect in some areas and against DataTables standard in others, so this version should do most of what you were trying to do in a much simpler form. A lot of your Ajax options are unnecessary because they are already the default (JSON for the data type, for example), which is why they have been removed.

One nice thing about DataTables is that you can have the Ajax options in the initialization, which is what I have done here. You do lose the success and failure callbacks but I think that for debugging purposes they aren't really necessary and having any extra code increases the amount of stuff to debug (I don't even use those callbacks in most of my final code).

Most of the other changes were mainly incorrect nomenclature (eg data instead of title in the column definitions.

Disclaimer

While I would recommend these changes in general just to improve your code, I would make sure to take a look at the format of the JSON that is being sent to and from the server. If you don't know how to do that I'd recommend downloading Fiddler to 'listen in' on the JSON data being sent.

If your JSON is wrong, no amount of changes to the page are going to make the table appear.

Finally, make sure you have no JS errors on the page. Use your browser's developer console (F12) to check that.

If you do find any JS errors, post them in your question. I'd also recommend posting the JSON data being sent to the question as well so that we can ensure the format is correct.