Ajax Request Datatabels

Source: DataTables

Processing in datatabels is enabled thought use of the serverSide: true option, and use the ajax: 'url' :

Example

View

HTML in view

column in HTML must have on JQ request

<table id="example2" class="table table-sm table-bordered table-hover" style="font-size: 12px;">
  <thead>
    <tr>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> label </th>
      <th> OPTION </th>
    </tr>
  </thead>
</table>

REQUEST JQ in view

column on Request JQ must have on request controller

let tabel = $('#example').DataTabel({
	serverSide: true,
	ajax: {
        // if can using API to get this data.?
		'url' : "path/file/func",
        'type': "POST"
	},
    // Name Column
    columns: [{
      data: "id"
    },{
      data: "item_code",
    },{
      data: "item_name",
    },{
      data: "category"
    },{
      data: "brand"
    },{
      data: "brands"
    },{
      data: 'item_quantity',
    },{
      data: 'item_broken',
    },{
      data: 'weight',
    },{
      data: 'item_unit',
    },{
      data: "item_capital_price",
    },{
      data: "item_selling_price",
    },{
      data: "note"
    },

    // OPTION, U can customise return, use render function.. 
    {
      data: "id",
      orderable: false,
      render: function(data, type, row) {
        return `
            <div class="btn-group d-flex justify-content-center">
            <a target="_blank" href="<?= url('items') ?>/edit?id=${row['id']}" class="btn btn-xs btn-default" data-toggle="tooltip" data-placement="top" title="Edit items"><i class="fa fa-tw fa-edit text-primary"></i></a>
            <a target="_blank" href="<?= url('items') ?>/info?id=${row['item_code']}" class="btn btn-xs btn-default" data-toggle="tooltip" data-placement="top" title="History items"><i class="fa fa-tw fa-history text-primary"></i></a>
            <a target="_blank" href="<?= url('items') ?>/info_transaction?id=${row['item_code']}" class="btn btn-xs btn-default" data-toggle="tooltip" data-placement="top" title="History transaction items"><i class="fa fa-tw fa-layer-group text-primary"></i></a>
            <?php if(hasPermissions('list_fifo')):?>
            <a target="_blank" href="<?= url('items') ?>/info_fifo?id=${row['item_code']}" class="btn btn-xs btn-default" data-toggle="tooltip" data-placement="top" title="Fifo items"><i class="fa fa-tw fa-book text-primary"></i></a>
            <?php endif;?>
            </div>`;
      }
    },
  ]
})

Controller Function Request

$data[] must have in column on selected on request table on database

function func(){
	$response = array();

    $postData = $this->input->post();

    ## Read value
    $draw = $postData['draw'];
    $start = $postData['start'];
    $rowperpage = $postData['length']; // Rows display per page
    $columnIndex = $postData['order'][0]['column']; // Column index
    $columnName = $postData['columns'][$columnIndex]['data']; // Column name
    $columnSortOrder = $postData['order'][0]['dir']; // asc or desc
    $searchValue = $postData['search']['value']; // Search value

    ## Total number of records without filtering
    $this->db->select('count(*) as allcount');
    $records = $this->db->get('items')->result();
    $totalRecords = $records[0]->allcount;

    ## Total number of record with filtering
    $this->db->select('count(*) as allcount');
    if ($searchValue != '') {
        // EXAMPLE //
        $this->db->like('item_name', $searchValue, 'both');
        $this->db->or_like('item_code', $searchValue, 'both');
        $this->db->or_like('category', $searchValue, 'both');
    }
    $records = $this->db->get('items')->result();
    $totalRecordwithFilter = $records[0]->allcount;

    ## Fetch records
    $this->db->select('*');
    if ($searchValue != '') {
        // EXAMPLE //
        $this->db->like('item_name', $searchValue, 'both');
        $this->db->or_like('item_code', $searchValue, 'both');
        $this->db->or_like('category', $searchValue, 'both');
    }
    $this->db->order_by($columnName, $columnSortOrder);
    $this->db->limit($rowperpage, $start);
    $records = $this->db->get('items')->result();

    $data = array();

    foreach ($records as $record) {

        $data[] = array(
            // EXAMPLE // Name Column
            "id" => $record->id,
            "item_code" => $record->item_code,
            "item_name" => $record->item_name,
            "category" => $record->category,
            "item_quantity" => $record->quantity,
            "item_broken" => $record->broken,
            "item_unit" => $record->unit,
            "item_capital_price" => $record->capital_price,
            "item_selling_price" => $record->selling_price,
            "note" => $record->note,
            "is_active" => $record->is_active,
        );
    }

    ## Response
    $response = array(
        "draw" => intval($draw),
        "iTotalRecords" => $totalRecords,
        "iTotalDisplayRecords" => $totalRecordwithFilter,
        "aaData" => $data
    );
    $this->output->set_content_type('application/json')->set_output(json_encode($response));
}

add event on datatabels draw,

tabel.on('draw', function(){
  // your function
})