CODEWITHSUNDEEP
phpjquerydatatable
Sam Teng Wong
Sam Teng Wong

Reputation: 2439

DataTable AjaxSource

I'm going straight to the point here. what I am trying to accomplish is to populate the table using ajax.

this gives me jquery.dataTables.min.js:39 Uncaught TypeError: Cannot read property 'length' of undefined error.

here's my code:

my php code:

public function pending_data(){

    $result = $this->ticketing_m->get_pending_tickets();
    echo json_encode($result);

}

JQUERY

var datatable = $("#datatable");

datatable.DataTable({
    "bProcessing": true,
    "bServerSide": true,
    "sAjaxSource": datatable.data('url')
});

HTML

 <table id="datatable"  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" data-url="<?php echo site_url(array("dashboard","pending_data")); ?>">
    <thead>
        <tr>
            <th>Ticket Number</th>
            <th>Subject</th>
            <th>From</th>
            <th>Date Created</th>
        </tr>
    </thead>
</table>

QUERY RESULT enter image description here

Upvotes: 2

Views: 769

Answers (5)

You Old Fool
You Old Fool

Reputation: 22941

First off, you should probably set bServerSide to false. If it is true you need to actually read the request parameters, do server side processing and structure your return data as outlined in the Server-side processing documentation. Since you are doing none of those things here I'm assuming you simply want to use Ajax sourced data and let the DataTables javascript handle the table processing

Next, structure your json with the table data inside data as shown here in example #2. Your json should look something like this:

{
    "data": [
        {
            "date_created": "2017-06-13 13:57:24",
            "full_name": "John Doe",
            "subject": "Test",
            "ticket_number": "Ticket 1234"
        },
        ...
    ]
}

To accomplish this you might do something as simple as this in the response from pending_data():

echo json_encode(array('data' => $result));

Also, the way you have your DataTables properties set up here looks like you are either using a very old version or an outdated syntax. I'd suggest installing the latest version and using up to date code. You can get all the downloads and examples you might need at: https://datatables.net

Upvotes: 1

美丽美丽花
美丽美丽花

Reputation: 212

I think your ajax source has 4 columns. But you have 5 columns in < thead >. Pls remove one tag in < thead >.

<table id="datatable"  class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%" data-url="<?php echo site_url(array("dashboard","pending_data")); ?>">
    <thead>
        <tr>
            <th>Ticket Number</th>
            <th>Subject</th>
            <th>From</th>
            <th>Date Created</th>
        </tr>
    </thead>
</table>

Upvotes: 1

Mayank Pandeyz
Mayank Pandeyz

Reputation: 26258

Use it like:

var url = 'http://www.json-generator.com/api/json/get/cbEfqLwFaq?indent=2';

  var table = $('#example').DataTable({
    'processing': true,
    'serverSide': true,
    'ajax': {
      type: 'POST',
      'url': url,
      'data': function (d) {
        console.log(d.order);
        return JSON.stringify( d );
      }
    }

  });

Working Fiddle

Upvotes: 0

Ahmed Ginani
Ahmed Ginani

Reputation: 6650

Do something like that also use data type https://datatables.net/examples/server_side/jsonp.html

 "processing": true,
 "serverSide": true, 
 "ajax": {
            "url": "scripts/jsonp.php",
            "dataType": "jsonp"
        }

Upvotes: 0

User123123
User123123

Reputation: 19

var oTable = $('#datatable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "${pageContext.request.contextPath}/",
"aoColumns" : [
{ "mData": "Ticket Numbe" },
{ "mData": "Subject" },
{ "mData": "From" },
{ "mData": "Date Created" }
]
});

I don't get the exact problem.This may help..

Upvotes: 0

Related Questions