Valid Json is loading but table still empty using codeigniter php class.

kc · July 2014

Hi guys,

I'm following up an earlier question with this because the prior question was marked as having an accepted answer ( I think accidently ):

I'm working with the jquery datatables plugin and codeigniter , while trying to follow (roughly ) http://www.ahmed-samy.com/php-codeigniter-full-featrued-jquery-datatables-part-1/. I am getting the following error:

DataTables warning: table id=big_table - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

In firebug there are no errors and the following valid JSON is returned: http://pastebin.com/sNPYqdrn I checked using http://jsonlint.com/. The table itself its empty.

How can I fix this?

Thanks in advance,

Bill

My controller:

function index()
{

        //set table id in table open tag
        $tmpl = array('table_open' => '<table id="big_table" border="1" cellpadding="2" cellspacing="1" class="mytable">');
        $this->table->set_template($tmpl);


        $this->table->set_heading("id,message_id,subject,date");

        $this->load->view('serversidetestview');
    }

    //function to handle callbacks

    function datatable()
    {

        $this->datatables->select("id,message_id,subject,date")->from('imap');
        echo $this->datatables->generate();
    }

My view:

<html> 
  <head> 
      <base href="<?=base_url();?>">

       <!-- DataTables CSS -->

    <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">

    <!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<!-- DataTables -->

<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.1/js/jquery.dataTables.min.js"></script>    



  </head> 
  <body> 


<h1>Subscriber management</h1>
<?php echo $this->table->generate(); ?>
</div>
<script type="text/javascript">
    $(document).ready(function () {
        var oTable = $('#big_table').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": 'datatable_controller/datatable',
            "bJQueryUI": true,
            "sPaginationType": "full_numbers",
            "iDisplayStart ": 20,

            "fnInitComplete": function () {
                oTable.fnAdjustColumnSizing();
            },
            'fnServerData': function (sSource, aoData, fnCallback) {
                $.ajax
                ({
                    'dataType': 'json',
                    'type': 'POST',
                    'url': sSource,
                    'data': aoData,
                    'success': fnCallback
                });
            }
        });
    });
</script>

  </body> 
</html>

rhino · July 2014

It may be a simple copy/paste error on your part, but in the pastebin that you linked, the object is missing the initial {

kc · July 2014

Thank you , Yes that was a copy and paste error, I tested the original Json as described above and it passed. - Bill

rhino · July 2014

So... problem solved or... problem still exists?

kc · July 2014

Unfortunately the problem is not solved.

rhino · July 2014

Perhaps it is because you haven't labeled the columns according to the data?

Have you tried putting this in the options?

 "columns": [
    { "data": "id" },
    { "data": "message_id" },
    { "data": "subject" },
    { "data": "date" }
  ]

Only a guess as I haven't used objects as my data source before...

rhino · July 2014

Also, what does the HTML markup look like after the call to:

<?php echo $this->table->generate(); ?>

kc · July 2014

html>
<head>
<base href="http://localhost/b1/">

   <link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.1/css/jquery.dataTables.css">

</head>
<body>

   <h1>Subscriber management</h1>
    <table id="big_table" border="1" cellpadding="2" cellspacing="1" class="mytable">

<thead>
<tr>
<th>id</th><th>message_id</th><th>subject</th><th>date</th></tr>
</thead>
</table>

$(document).ready(function () { var oTable = $('#big_table').dataTable({ "bProcessing": true, "bServerSide": true, "sAjaxSource": 'datatable_controller/datatable', "sPaginationType": "full_numbers", // "iDisplayStart ": 20, // "oLanguage": { // "sProcessing": "

" // }, "columns": [ { "data": "id" }, { "data": "message_id" }, { "data": "subject" }, { "data": "date" } ] "fnInitComplete": function () { oTable.fnAdjustColumnSizing(); }, 'fnServerData': function (sSource, aoData, fnCallback) { $.ajax ({ 'dataType': 'json', 'type': 'POST', 'url': sSource, 'data': aoData, 'success': fnCallback }); } }); });

</body>
</html>

kc · July 2014

or try: http://pastebin.com/tWPRMGBn

rhino · July 2014

May or may not be an issue, but line 45 of your pastbin is missing a comma after the ]

rhino · July 2014

Ah, new thought! I didn't have a quick way to test this with JSON per se... but I did create a localized test here on live.datatables.net (demo)

Here's a copy of the most relevant parts (note the comments near the end):

var test = { "something": "3", "other": "5", 
              "data": [
                { "id": "1337", "subject": "Leetness" },
                { "id": "9001", "subject": "Over9000!" },
                { "id": "1138", "subject": "cell block" },
                { "id": "tk421", "subject": "not at post" }
              ]
             };
  
  var test2 = { "data": [
                { "id": "1337", "subject": "Leetness" },
                { "id": "9001", "subject": "Over9000!" },
                { "id": "1138", "subject": "cell block" },
                { "id": "tk421", "subject": "not at post" }
              ]
             };

var table = $('#example').DataTable({
    //data: test, //DOES NOT WORK
    //data: test2, //DOES NOT WORK
    data: test2.data, //WORKS
    "columns": [
      {"data": "id"},
      {"data": "subject"}
    ]
  });

So it may be that you need to only send the array of objects? And remove the draw, recordsTotal, and recordsFiltered fields? Or perhaps somehow tell DT to ignore them?

kc · July 2014

Rhino, Thank you very much for sticking with it. You were correct, it was the comma after line 45. I've been working on this for days, so much appreciated.

Best Regards,

Bill

kontramundo · July 2014

thanks, also works for me, though not served filtering, any idea what this doing wrong

rhino · July 2014

@kontramundo I'd suggest making a new post detailing the issue you are having, and linking back to this post, if you feel it provides context to your problem

kontramundo · July 2014

Solved Thanks.

kc · August 2014

kontramundo, what was the solution?

Valid Json is loading but table still empty using codeigniter php class.

Valid Json is loading but table still empty using codeigniter php class.

Answers

Howdy, Stranger!

Categories

DataTables

Valid Json is loading but table still empty using codeigniter php class.

Valid Json is loading but table still empty using codeigniter php class.

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables