Ajax结果行 - 如何分页?

时间:2016-12-05 11:17:05

标签: jquery ajax codeigniter pagination

如何在codeigniter中对我的ajax结果行进行分页。我想显示我的ajax结果,即每页4或5行批量10-20行。 Hwlp我通过。它不是Ajax分页,但它是ajax调用中的ajax分页。谢谢

这是我的观点文件:

 <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.12/datatables.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">    </script>
<script>
 $(document).ready(function(){
 $("#getreport").click(function(){
 var fromdate = $('#date1').val();
 var todate = $('#date2').val();
 $("#header").css("visibility", "visible");
 // $("#bodycontent").empty();
 // $("#bodycontent").html('<div id="subcontent"></div>');
 data =
{
"from"  : fromdate,
"to" : todate
} 
$.post('<?=site_url("Report/managecustomers_report"); ?>', data ,function (data) {
$('#datatable').dataTable({
    data : data
    // columns : [
    // { 'data' : 'picture'},
    // { 'data' : 'customername'},
    // { 'data' : 'contactperson'},
    // { 'data' : 'mobilenumber'},
    // { 'data' : 'phone'},
    // { 'data' : 'email'},
    // ]
});
});     
});
});
</script>
<div class="table-responsive">
    <table class="table allcp-form theme-warning fs13">
        <thead>
            <tr class="bg-light">
                <th class="">Image</th>
                <th class="">Customer Name</th>
                <th class="">Contact Person</th>
                <th class="">Mobile Number</th>
                <th class="">Phone</th>
                <th class="">Email</th>

            </tr>
        </thead>
    </table>
</div>

我的控制器:

public function managecustomers_report()
{

 $query = $this->Reportmodel->customerreport_select($this->input->post('from'),$this->input->post('to'));
 $data = $query['records'];
  $this->output->set_content_type('application/json');
 $this->output->set_output(json_encode($data));
 return $data;
}

我的模特档案:

public function customerreport_select($date1,$date2)
{
$this->db->where('date >=', $date1);
$this->db->where('date <=', $date2);
$query=$this->db->get('customers');
$row = $query->result();
print_r($row);
return array(
'records' => $row,
'count' => count($row));
}

1 个答案:

答案 0 :(得分:0)

尝试使用jquery datatables插件。 jquery数据表的服务器端功能完全满足您的需求。搜索数据并对数据列进行排序更容易。

控制器:

public function managecustomers_report()
{

 $query = $this->Reportmodel->customerreport_select($this->input->post('from'),$this->input->post('to'));
 $data = $query['records'];
 header('Content-Type: application/json');
 echo json_encode($data);
}

模型:

public function customerreport_select($date1,$date2)
{
    $this->db->where('date >=', $date1);
    $this->db->where('date <=', $date2);
    $query=$this->db->get('customers');
    $row = $query->result();

    return array(
       'records' => $row,
       'count' => count($row));
}

这是我实现服务器端功能的示例,请参考这可能对您有所帮助

视图:

<script>
    $(document).ready(function() {
        var table = $('#inbox').dataTable( {


         "bServerSide": true,
         "sAjaxSource": "<?php echo base_url(); ?>index.php/Inbox_redirect/inbox",
         "bProcessing": true,
        "order": [],
         "bSortable" : true,
          "aaSorting": [[2, 'asc']],
         "sServerMethod": "GET",
         "columns" : [ 
            {"data" : "mailId"},
            {"data" : "mailSender"},
            {"data" : "mailSubject"},
            {"data" : "mailContent"},
            {"data" : "mailSendDate"} ],
        "columnDefs": [
        { 
            "targets": [ 0 ], //first column / numbering column
            "orderable": false, //set not orderable
        },
        ],

    } );
} );



</script>

控制器:

public function inbox()
     {
         $data = array(
                    'receiverEmail' => $this->session->userdata['user_login']['loginEmail'],
            );
        $response = $this->mail_receive->inbox($data);

     $output = array(
                        "iTotalRecords" =>$this->mail_receive->totalRecords($data),
                        "iTotalDisplayRecords" => $this->mail_receive->totalRecords($data),
                         "aaData" => $response,
                );


        header('Content-Type: application/json');
        echo json_encode($output);

     }

模型:

public function inbox($data)
     {
        $con = mysqli_connect("localhost", "root", "","mailman");

        $receiverEmail = $data['receiverEmail'];

        $lenghtLimit = $_REQUEST['iDisplayLength'];

        $startLimit = $_REQUEST['iDisplayStart'];

        $searchTerm = $_REQUEST['sSearch'];



        $querySender = "SELECT userId FROM users WHERE userEmail= '$receiverEmail'";
        $resSender = mysqli_query($con, $querySender);
        $rowSender = mysqli_fetch_assoc($resSender);
        $columnSender = $rowSender["userId"]; 


        $querySender = "SELECT mailId,mailSender,mailSubject,mailContent, mailSendDate FROM mails 
                        WHERE mailContent LIKE '%$searchTerm%' 
                        AND mailReceiver = '$columnSender' 
                        LIMIT $lenghtLimit OFFSET $startLimit ";

        $resSender = mysqli_query($con, $querySender);
        $rowSender = mysqli_fetch_assoc($resSender);

        $myMail = array();
        $test = array();

        while($row = mysqli_fetch_array($resSender))     
        {
            $senderId = $row['mailSender'];

            $querySenderName = "SELECT userName FROM users WHERE userId= '$senderId'";
            $resSenderName = mysqli_query($con, $querySenderName);
            $rowSenderName = mysqli_fetch_assoc($resSenderName);
            $columnSenderName = $rowSenderName["userName"]; 

            $myMail[] = array(
                'mailId' => $row['mailId'],
                'mailSender' => $columnSenderName,
                'mailSubject' => $row['mailSubject'],
                'mailContent' => $row['mailContent'],
                'mailSendDate' => $row['mailSendDate']
                );

            $test[] = $row;



        }
        $startLimit = $startLimit + $lenghtLimit;
        return $myMail;

    }