Вы должны использовать разбиение на страницы на стороне сервера для множественной сетки и разбиения на страницы на одной странице.Я использую datatable для одиночной сетки, вы можете взять идею из этого примера.
Загрузить представление
public function index(){
if($this->session->userdata('id')){
$search = trim($this->input->post('search'));
$config = array();
$config["base_url"] = base_url() . "user";
//$config["total_rows"] = $this->user_model->count($search);
$config["per_page"] = 20;
$config["uri_segment"] = 2;
$config['use_page_numbers'] = TRUE;
$config['query_string_segment'] = 'per_page';
$this->pagination->initialize($config);
$page = ($this->uri->segment(2)) ? $this->uri->segment(2) : 0;
// $page = trim($this->input->post('page'));
$data["search"] = $search;
//$data["list"] = $this->user_model->userList($search, $page, $config["per_page"]);
$data["links"] = $this->pagination->create_links();
if($page > 1) {
$data["sno"] = (($page*$config["per_page"])-$config["per_page"]);
} else {
$data["sno"] = 0;
}
$this->load->view('user', $data);
}else{
//load login view
redirect(base_url());
}
}
API-функция
public function list() {
if($this->session->userdata('id')){
$search = trim($this->input->post('search'));
$orderColumn = (int) $_GET['order'][0]['column'];
$orderBy = $_GET['columns'][$orderColumn]['name'];
$orderType = $_GET['order'][0]['dir'];
$draw = $_GET['draw'];
$start = $_GET['start'];
$length = $_GET['length'];
/*/ Make search Array /*/
//$search = array();
$str = $_GET['search']['value'];
if ($str != '') {
for ($i = 0; $i < count($_GET['columns']); $i++) {
$requestColumn = $_GET['columns'][$i];
if ($requestColumn['searchable'] == 'true') {
$search[$requestColumn['name']] = $str;
}
}
}
/*/ Get count of records /*/
$recordsTotal = $this->user_model->count($search);
$list_outlier = $this->user_model->userList($start, $length, $orderBy, $orderType, $search);
/*/ Make data array to be display /*/
$data = array();
if (is_array($list_outlier) && !empty($list_outlier)) {
$count = $start;
/*/ If order by Serial Number with descending /*/
if ($orderColumn == 0 && $orderType == 'desc') {
$count = (($recordsTotal - $start) + 1 );
}
foreach ($list_outlier as $key => $value) {
if ($orderColumn == 0 && $orderType == 'desc') {
$count--;
} else {
$count++;
}
$data[$key][] = !empty($value->member_name)?$value->member_name:'N/A';
$data[$key][] = !empty($value->member_type)?$value->member_type:'N/A';
$data[$key][] = !empty($value->mobile)?$value->mobile:'N/A';
$data[$key][] = !empty($value->email)?$value->email:'N/A';
//$data[$key][] = !empty($value->id)?$value->id:'N/A';
$html = '
<div class="input-group-btn">
<a class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-bars"></i></a>
<div class="dropdown-menu dropdown-menu-right">
<li>
<a class="dropdown-item" href="#" onclick="getEventId('.$value->id.')" title="Edit" data-toggle="modal" data-target="#myModal5">
<i class="fa fa-pencil"></i> Edit
</a>
</li>';
if($value->isActive) {
$html .= '<li><a href="'.base_url().'user/status?id='.$value->id.'&action=0" class="dropdown-item btn-delete" title="Deactive"><i class="fa fa-thumbs-down" ></i> Deactive</li>';
} else {
$html .='<li><a href="'. base_url().'user/status?id='.$value->id.'&action=1" class="dropdown-item btn-delete" title="Aactive"><i class="fa fa-thumbs-up" ></i> Active</li>';
}
$html .='</div></div>';
$data[$key][] = $html;
}
}
$respose = array(
"draw" => ($draw + 1),
"recordsTotal" => $recordsTotal,
"recordsFiltered" => $recordsTotal,
"data" => $data
);
echo json_encode($respose);
}else{
//load login view
redirect(base_url());
}
}
Просмотр
<table id="data_table_othc_dthc" class="table display table-bordered">
<thead>
<tr>
<th class="th-left">Name</th>
<th>Member Type</th>
<th>Mobile</th>
<th>Email</th>
<th class="th-action">Actions</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
jQuery(document).ready(function(){
$('#data_table_othc_dthc').DataTable({
"columns": [
{"name": "member_name"},
{"name": "member_type"},
{"name": "mobile"},
{"name": "email"},
{"name": "id", searchable: false}
],
scrollX: true,
scrollCollapse: true,
"processing": true,
"serverSide": true,
"order": [ 0, 'ASC' ],
"ajax": "YOURDomain/user/list",
"pageLength": 20
});
}); //Document End
</script>