How are you using the "ajax" property with "serverSide?"

How are you using the "ajax" property with "serverSide?"

HillChris1234HillChris1234 Posts: 27Questions: 13Answers: 2
edited April 2016 in Free community support

I'm looking at the documentation for the Server-Side property. It says to provide the ajax data source through the ajax property... but I have no idea what that means. All I want is for the grid to load a page on demand rather than load the entire grid when the page loads. What is the ajax data source? I'm using .Net MVC by the way. The table is constructed in the view by looping through a Model with a foreach loop. I tried setting the "serverSide": true property, but when I run the page, I get this message:

DataTables warning: table id=tblEmployers - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1

I'm so lost.

This question has an accepted answers - jump to answer

Answers

  • AshbjornAshbjorn Posts: 55Questions: 2Answers: 16

    @HillChris1234 if you intend to use serverSide: true then you have to make sure the table contains an empty body element, as this would be rendered by the plugin once it received the data from the server call. In your case you have to remove the iteration over your enumerable model so DataTables can take over.

    An example of using the ajax property with MVC:

                    ajax: {
                        url: '@Url.Action("List", "Reporting")',
                        type: 'POST'
                    },
    

    Hope this helps,

  • itzdarkoutthereitzdarkoutthere Posts: 5Questions: 1Answers: 0
    edited April 2016

    So all of the data is already in the html table before you call the DataTables() function?

    It's a different way of delivering data to the table. Instead of building a table with all the data in it, then initializing datatables, you would just build a skeleton table with no data in it. The ajax property uses jquery ajax to pull the data from the server and populate the table. Using the serverSide property allows you to push pagination to your server side logic, so instead of all of the data being populated into the table at once, and just being hidden until you go to a different page, it only requests the specific data needed for the page you are on. So you will need to implement server side logic that can be invoked via http request that returns your table data in the form of json. This server side logic will also need to handle the parameters datatables sends it for paging and all of that fun stuff.

    https://datatables.net/examples/data_sources/ajax.html

    I get the feeling that serverSide property is not what you need to use. Could you explain in more detail what you are trying to achieve with that property?

  • HillChris1234HillChris1234 Posts: 27Questions: 13Answers: 2

    I need the table to ONLY grab the data from the server that's being displayed in the table's current state. So, if the table is only displaying 1-10 of 500 records, ONLY get records 1-10. When I click page 2, go back to the server and get 11-20. See, in web forms, you just create your GridView, then set a simple property on the control to emulate this behavior. But, because this is MVC and I have to rely on third-party plug-ins to build a table, and the view is constructing the table on the fly, I can't do that. This may be totally unrelated, but one of my favorite (sarcasm) things about MVC is that it allows people to go back to all the bad habits that came along with classic ASP (Razor), all the while touting the extremely marginal benefits of using MVC over web forms. What I'm trying to do should be a fairly simple task. And, as far as the DataTables plug-in is concerned, it IS a fairly simple task... but it assumes that I've build the controller and the table a certain way. Which begs the question, what's the purpose of using a framework like MVC that allows me that kind of flexibility if I have to rely on plug-ins that require that I build my application in a particular style?

  • allanallan Posts: 63,175Questions: 1Answers: 10,409 Site admin
    Answer ✓

    I need the table to ONLY grab the data from the server that's being displayed in the table's current state.

    That's exactly what server-side processing does.

    but it assumes that I've build the controller and the table a certain way.

    Correct - this page documents documents the client / server data interchange that DataTables expects. You can use some of the events and callbacks to modify the data sent to the server and that returned by the server if you need it to send different parameter names or decode data returned by the server.

    what's the purpose of using a framework like MVC that allows me that kind of flexibility if I have to rely on plug-ins that require that I build my application in a particular style?

    The approach DataTables takes has to be platform agnostic - it needs ot be suitable for PHP, Ruby, Node, ColdFusion, etc. So it can't use something specific to .NET, which is why the parameters sent to the server, and the format that is expected in return, is documented.

    In an MVC environment, to a large extent DataTables defines the view (if it is configured with an Ajax source) since it renders the JSON to the browser. You can't return an HTML view to DataTables' Ajax request (actually, you probably can and deformat it into javascript objects / arrays, but that seems redundant).

    Regards,
    Allan

This discussion has been closed.