DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

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

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

kckc Posts: 14Questions: 4Answers: 0
in Free community support

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>

This question has an accepted answers - jump to answer

Answers

  • rhinorhino Posts: 80Questions: 2Answers: 17
    edited 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 {

  • kckc Posts: 14Questions: 4Answers: 0

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

  • rhinorhino Posts: 80Questions: 2Answers: 17

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

  • kckc Posts: 14Questions: 4Answers: 0

    Unfortunately the problem is not solved.

  • rhinorhino Posts: 80Questions: 2Answers: 17
    edited 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...

  • rhinorhino Posts: 80Questions: 2Answers: 17

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

    <?php echo $this->table->generate(); ?>
  • kckc Posts: 14Questions: 4Answers: 0

    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": "image" // }, "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>

  • kckc Posts: 14Questions: 4Answers: 0

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

  • rhinorhino Posts: 80Questions: 2Answers: 17
    Answer ✓

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

  • rhinorhino Posts: 80Questions: 2Answers: 17
    edited 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?

  • kckc Posts: 14Questions: 4Answers: 0

    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

  • kontramundokontramundo Posts: 2Questions: 0Answers: 0

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

  • rhinorhino Posts: 80Questions: 2Answers: 17

    @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

  • kontramundokontramundo Posts: 2Questions: 0Answers: 0

    Solved Thanks.

  • kckc Posts: 14Questions: 4Answers: 0

    kontramundo, what was the solution?

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.