在弹窗内进行分页,因为是在之前代码上增加分页,所以采用拼接方法,其实这种方法并不好。如果采用vue 应该更好一些。
控制器:
/**
* 单位 详情
* @author shenguowei
*/
public function show()
{
$page = $this->I('page') ?: 1;
$limit = 10;
$department_id = $this->I('department_id');
$data = $this->department_service->get_department_info_by_page($department_id, $page, $limit);
$this->view_param['details'] = $data['details'];
$is_admin = 0;
if ($_SESSION['user_auth']['admin_group'] == 1) {
$is_admin = 1;
}
$data['is_admin'] = $is_admin;
if (!empty($this->view_param['details'])) {
$this->response_service->success('Success', 200, TRUE, $data);
}
else {
$this->response_service->error();
}
}
服务层:
/**
* @author shenguowei
* @param $department_id
* @param $page
* @param $limit
* @return array|bool
*/
public function get_department_info_by_page($department_id, $page, $limit)
{
$data = [];
$_page_url = site_url('index.php/auth/department/show');
if (!$department_id) {
return FALSE;
}
$department_info = $this->department_model->get_one_department(['department_id' => $department_id], 'department_name');
if (!$department_info) {
$this->add_message($this->lang->language['tip_not_exsit_depart']);
return FALSE;
}
$number = 0;
$users = $this->db->from('user')->where('is_delete', 0)->where('department_1', $department_id)->get()->result_array();
if (!empty($users)) {
$number = count($users);
}
if (intval($page) <= 1) {
$page = 1;
}
$pages = intval(ceil($number / $limit));
if ($pages != 0) {
if (intval($page) >= $pages) {
$page = $pages;
}
}
$start = (intval($page) - 1) * $limit;
$this->load->model('user_model');
$detail_sql = "SELECT uid,truename,mobile,department_1 as department_id FROM goms_user WHERE department_1={$department_id} AND is_delete=0 LIMIT {$start},10";
$data['details'] = $this->db->query($detail_sql)->result_array();
$data['department_name'] = $department_info['department_name'];
$pagination_html = $this->get_pagination_html_ajax($number, $limit, $page, $_page_url, $theme = 'white', $button_total = 8);
$data['pagination_html'] = $pagination_html;
$data['total'] = $pages;
if (!$data) {
return FALSE;
}
return $data;
}
js:部分
//獲取單位 詳情
$table.on("click", ".js-detail", function () {
// $('#userList').css('display','block');
var department_id = $(this).attr('department_id');
view_detail(department_id,1);
// view_detail($(this));
});
//查看详情
function view_detail(department_id,page) {
var page = page;
var loadData = function(department_id,page,callback){
$.ajax({
url: DEPART_DETAIL_URL + "?department_id=" + department_id+"&page="+page,
type: 'get',
dataType:'json'
}).done(function(res){
callback(res);
});
};
if(page == 1){
loadData(department_id,page,function(res){
if(res.code == 200){
var detail = res.data.details;
var contentHTML = '<div id="userList">\n' +
'<div class="lm-dialog lm-dialog-user-list" rel="111">\n' +
'<a href="#" class="lm-dialog-close js-close">×</a>\n' +
'<div class="lm-dialog-header clearfix">\n' +
'<h4 class="lm-dialog-header-title pull-left">' + NAME + '</h4>\n' +
'<span class="lm-dialog-header-explain pull-right">' + DEPARTMENT_DETAIL + '</span>\n' +
'</div>\n' +
' <!-- /lm-dialog-header -->\n' +
'<div class="lm-dialog-body">\n' +
'<div class="lm-table-wrapper">\n' +
'<table class="lm-table lm-table-hover text-center">\n' +
'<thead>\n' +
'<tr class="row-fluid">\n' +
'<th>' + NAME + '</th>\n' +
'<th>' + MOBILE + '</th>\n' +
'<th colspan="4"></th>\n' +
'</tr>\n' +
'</thead>\n' +
'<tbody>';
for (var i = 0; i < detail.length; i++) {
contentHTML += '<tr class="row-fluid">\n';
if (res.data.is_admin == 1) {
contentHTML += '<td class="col-fluid-3" >' + detail[i].truename + '</td>\n' +
'<td class="col-fluid-3">' + detail[i].mobile + '</td>\n' +
'<td class="col-fluid-2"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>\n' +
'<td class="col-fluid-2">\n' +
'<a uid="' + detail[i].uid + '" class="lm-link js-reset-pwd">' + RESET_PWD + '</a>\n' +
'</td>\n' +
'<td class="col-fluid-1">\n' +
'<a uid="' + detail[i].uid + '" class="lm-link js-modify js-edit-user">' + EDIT + '</a>\n' +
'</td>\n' +
'<td class="col-fluid-1">\n' +
'<a uid="' + detail[i].uid + '" class="lm-link js-delete js-delete-user">' + DELETE + '</a>\n' +
'</td>\n';
} else {
contentHTML += '<td class="col-fluid-4" >' + detail[i].truename + '</td>\n' +
'<td class="col-fluid-4">' + detail[i].mobile + '</td>\n' +
'<td class="col-fluid-4"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>\n';
}
contentHTML += '</tr>';
}
contentHTML += '</tbody>\n' +
'</table>\n' +
'</div>\n' +
'<div class="zh-page text-right zh-mt-20">\n' +
'<div class="zh-page-content" style="color:white;">\n' +
res.data.pagination_html +
'</div>\n' +
'</div>\n' +
'</div></div></div>';
showDetailLayer(contentHTML,res.data.total);
}else{
contentHTML = ' <div id="managerList">\n' +
' <p role="tip-auto-close" style="padding: 15px; color: #fff; font-size: 14px; background-color: rgba(0, 0, 0,.8);">\n' +
TIP_NULL_DATA +
' </p>\n' +
' </div>'
showDetailLayer(contentHTML,0);
}
});
}
//拼接 详情列表内容
function renderDOM(res) {
var fragment = [];
var detail = res.data.details;
var html;
for (var i = 0; i < detail.length; i++) {
if(res.data.is_admin == 1){
html = ['<tr class="row-fluid">',
' <td class="col-fluid-3">' + detail[i].truename + '</td>',
' <td class="col-fluid-3">' + detail[i].mobile + '</td>',
' <td class="col-fluid-2"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>',
' <td class="col-fluid-2">',
' <a uid="' + detail[i].uid + '" class="lm-link js-reset-pwd">' + RESET_PWD + '</a>',
' </td>',
' <td class="col-fluid-1">',
' <a uid="' + detail[i].uid + '" class="lm-link js-modify js-edit-user">' + EDIT + '</a>',
' </td>',
' <td class="col-fluid-1">',
' <a uid="' + detail[i].uid + '" class="lm-link js-delete js-delete-user">' + DELETE + '</a>',
' </td>',
'</tr>'].join("")
}else{
html = ['<tr class="row-fluid">',
' <td class="col-fluid-4" >' + detail[i].truename + '</td>',
' <td class="col-fluid-4">' + detail[i].mobile + '</td>',
' <td class="col-fluid-4"><a uid="' + detail[i].uid + '" class="lm-link js-manager js-view-log">' + LOGIN_LOG + '</a></td>',
'</tr>'].join("")
}
fragment.push(html);
}
return fragment.join("");
}
function showDetailLayer(contentHTML,total){
return layer.open({
type: 1,
title: false,
closeBtn: 0,
shadeClose: false,
move: '.lm-dialog-header',
skin: 'lm-dialog-layer',
content: contentHTML,
success: function (dialog) {
var $pageItem = dialog.find("ul .lm-pagination-page");
var pageStyle = function (trigger){
$pageItem.removeClass("page-active");
$(trigger).addClass("page-active");
};
// dialog.on('click', '.js-view-admin', function () {
//
// view_admin($(this))
// });
dialog.on('click','.js-reset-pwd',function () {
reset_psw($(this));
});
dialog.on('click','.js-delete-user',function(){
delete_user($(this));
});
dialog.on('click','.js-edit-user',function(){
edit_user($(this));
});
dialog.on('click','.js-view-log',function(){
view_login_log($(this));
});
dialog.on("click", ".js-close", function () {
layer.closeAll();
return false;
});
//普通页
dialog.on("click",".js-pagination-page", function(){
page = $(this).data('page');
pageStyle(this);
loadData(department_id, page, function(res){
dialog.find("tbody").html(renderDOM(res));
});
});
//上一页
dialog.on("click",".js-pagination-prev", function(){
page = Math.max(--page,1);
pageStyle($pageItem.filter("[data-page="+page+"]"));
loadData(department_id, page, function(res){
dialog.find("tbody").html(renderDOM(res));
});
});
//下一页
dialog.on("click",".js-pagination-next",function(){
// var max = $(this);
page=Math.min(++page, total);
pageStyle($pageItem.filter("[data-page="+page+"]"));
loadData(department_id, page, function(res){
dialog.find("tbody").html(renderDOM(res));
});
});
if (dialog.find("[role='tip-auto-close']").length > 0) {
setTimeout(function () {
layer.closeAll();
}, 2000);
}
}
});
}
}
```