Having trouble getting AJAX to work.

Having trouble getting AJAX to work.

Robert696Robert696 Posts: 5Questions: 1Answers: 0

I'm using MVC 5 with Datatables. Controller returns JSON formatted data. Data is not displaying in a data table.

I posted example at http://live.datatables.net/puhuyofo/1/

I don't know how exactly to emulate at live.datatables.net this since all this work is currently in our dev environment. In my example (which also doesn't work), I created a variable that holds a JSON result with a sample of data that would get returned.

I'm still a novice at JQuery and MVC so perhaps there is something obvious that I'm missing.

Any help would be appreciated.

Rob

This question has accepted answers - jump to:

Answers

  • tangerinetangerine Posts: 2,413Questions: 18Answers: 270

    "ajax": "data"

    I don't think you need the quotes around data as it's the name of a variable.

  • Robert696Robert696 Posts: 5Questions: 1Answers: 0

    @tangerine -- Thank you for your quick response. Unfortunately, I get the same results either way. :(

    Rob

  • ignignoktignignokt Posts: 146Questions: 4Answers: 39
    edited December 2014

    Try changing var data = '{[{" to var data = '[{" and of course the ending to match it. "}]';

    It doesn't seem to work in your example when I make the change, but your full reply should look like this via server-side ajax:

    {"draw":1,"recordsTotal":1,"recordsFiltered":1,"data":[{"fileName":"My File","statusText":"Good","downloaded":"Yes","numberOfRows":"12","rowsInError":"0","errorText":"My error!"}]}
    

    If you are not using the DataTables server side code, or another method. It will work handling it yourself, I'm not sure exactly how you are retrieving your data. You could also do it like this though.

    $(document).ready( function () {
      var data = [{0:"Hamm",1:"turkey",2:"yees",3:"12",4:"12",5:"Ham"}];
      var table = $('#example').dataTable({
        "data": data,
        "paging": true,
        "ordering": true
      });
    } );
    
  • Robert696Robert696 Posts: 5Questions: 1Answers: 0
    edited December 2014

    @ignignokt -- Thank you for your quick response. I tried that. Still the same error message pointing me to http://www.datatables.net/manual/tech-notes/7. If I also remove the quotes from the ajax call as suggested by @tangerine I don't get that error but the data still doesn't show up in the output, although I do see it in the network tab of the debugger window (F12) with a response code of 404

    recent changes at http://live.datatables.net/puhuyofo/4/

  • ignignoktignignokt Posts: 146Questions: 4Answers: 39

    I also edited my last response with another way to format the data. I'm not sure if you want to go that route though.

  • Robert696Robert696 Posts: 5Questions: 1Answers: 0

    The data is coming from a controller in MVC 5 using C#.net It returns the exact data that I used in my example (minus the outer single quotes which I've tried removing from the example as well)

    I'm still new at using Datatables, so I didn't know there was a server side piece. Perhaps not for C#.NET. I can get the zero configuration example to work just fine in my code with dynamically generated HTML. Anything else is difficult.

    Robert

  • allanallan Posts: 50,839Questions: 1Answers: 7,618 Site admin
    Answer ✓

    Several issues with the example:

    1. Columns - the case is wrong, it should be columns. DataTables is currently ignoring it since it doesn't look at Columns at all.
    2. ajax expects a URL (or an object or function). So it was trying to use the data string as a url... Use data to pass in data directly.
    3. The data variable was a string, not an array.

    Update: http://live.datatables.net/somobiva/1/edit

    Allan

  • Robert696Robert696 Posts: 5Questions: 1Answers: 0

    @allan -- Thank you for clarifying that. So tough to learn new ways of doing things at my age :). If I were to do this with a URL that returns JSON results, I would assume that I would need to use the "ajax" call instead of the "data" call?

    Robert

  • allanallan Posts: 50,839Questions: 1Answers: 7,618 Site admin
    Answer ✓

    Correct :-). From the API documentation summary:

    • data: Data to use as the display data for the table.
    • ajax: Load data for the table's content from an Ajax source

    Allan

This discussion has been closed.