CODEWITHSUNDEEP
jquerycodeigniterdatatablescodeigniter-3
Alex
Alex

Reputation: 9265

Ignited Datatables, Codeigniter paging/search issue

I'm trying to get IgnitedDatatables up and running in a test situation. I am able to populate all the rows with my data, however:

  1. The paging system doesn't work. Shows 8 pages but all (72) items are on 1 page. It seems as though length isn't being respected despite me seeing a length of 10 in the post data. If I click, for example, page 2 I can see an ajax call being made but it returns the same information that was loaded on page load.
  2. The search function doesn't do anything. If I type something in it returns the same information that was loaded on page load.

No console errors. I am using DataTables 1.10.15, responsive version for bootstrap.

I'm usually pretty good with debugging, but I am dealing with a third-party library with limited documentation.

Controller:

class Test extends MY_Backend {

    public function index() {

        $this->tpl->head();
        $this->tpl->body();
        $this->load->view('test');
        $this->tpl->footer();
    }

    public function ajax() {

        $this->load->library('datatables');

        $this->datatables
                ->select('id, project_name, created, last_modified')
                ->unset_column('id')
                ->from('projects')
                ->add_column('actions', 'Hello World!');

        $result = $this->datatables->generate('json', '');

        echo $result;
    }

}

View/JS (JS + JQUERY loaded in header):

<script>
    $(document).ready(function () {
        $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "pageLength": 10,
            "ajax": "/neou_cms/test/ajax",
            "aoColumns": [
                {"mData": "project_name"},
                {"mData": "created"},
                {"mData": "last_modified"},
                {"mData": "actions"}
            ],
        });
    });
</script>

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Project Name</th>
            <th>Created</th>
            <th>Modified</th>
            <th>Actions</th>
        </tr>
    </thead>
</table>

Upvotes: 1

Views: 991

Answers (1)

Alex
Alex

Reputation: 9265

I guess somewhere between 1.10 and 1.10.15 datatables started using $_GET as a default. Using the example here I was able to change the ajax type to POST and everything is working as expected.

<script>
    $(document).ready(function () {
        $('#example').DataTable({
            "processing": true,
            "serverSide": true,
            "pageLength": 10,
            "ajax": {
                "url": "/neou_cms/test/ajax",
                "type": "POST"
            },
            "columns": [
                {"data": "project_name"},
                {"data": "created"},
                {"data": "last_modified"},
                {"data": "actions", "orderable": false, "searchable": false}
            ],

        });
    });
</script>

Upvotes: 1

Related Questions