php 点击表头排序,TP5+ajax实现点击表格表头切换排序，带分页

TP5+ajax实现点击表格表头切换排序，带分页

2018-08-15 14:59:06ThinkPHP

php接收页码请求的地址

/**

* ajax 无刷新分页

* param $page int 页码数

* param $field string 排序字段

* param $sort asc或desc 排序方式

* @return mixed

* @throws thinkexceptionDbException

*/

public function getPage($page=1,$field='field',$sort='asc')

{

$order = $field." ".$sort;

$list = Db::name('table')

->order($order)

->paginate(10,false,['page'=>$page,'path'=>'javascript:AjaxPage([PAGE]);']);

$this->assign('list',$list);

return $this->fetch('page');

}

js方法中field和order作为全局变量，随点击不同的表头改变

var order = 'desc';

var field = 'phone_name';

// 排序

$(function(){

$(".table-responsive").on('click','.thsort',function(event) {

event.preventDefault();

/* Act on the event */

// 获取排序方式

field = $(this).data("field");

// alert(field);return;

if (order == 'desc') {

order = "asc";

} else if (order == 'asc') {

order = "desc";

}

console.log(field);

// alert(order);

$.post('{:url("Tel/sort")}',{field: field,sort: order},function(data,textStatus,xhr) {

/*optional stuff to do after success */

//console.log(data);

$('.table-responsive').html(data);

});

});

});

function AjaxPage(page){

// 按字段分页

$.get(

'/index.php/index/Tel/getPage',

{ page: page,field: field,

function (data) {

// console.log(data);return;

$('.table-responsive').html(data)

}

html模版

表头1表头2表头3表头4表头5表头6表头7

{volist name="phone_list" id="vo" key="k"}

{$vo.phone_name}{$vo.name}{$vo.txt_no}{$vo.collect}{$vo.valid}{$vo.jiaoji}{$vo.stamp}

{/volist}

{$phone_list->render()}