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

php接收页码请求的地址

    /**
     * ajax 无刷新分页
     * param $page int 页码数
     * param $field string 排序字段
     * param $sort asc或desc 排序方式
     * @return mixed
     * @throws \think\exception\DbException
     */
    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');

    }

php类中的sort方法

/**
     * 无刷新排序
     *
     */
public function sort()
{
    if (input("field") && input("sort")) {
        $order = input("field")." ".input("sort");
        $phone_list = Db::name('tel')
            ->alias('t')
            ->join('tree c', 't.c_id=c.id')
            ->field('t.phone_name,c.name,t.txt_no,t.collect,t.valid,t.jiaoji,c.name,FROM_UNIXTIME(t.stamp, "%Y-%m-%d %H:%i:%s") stamp')
            ->where('t.date',cookie('query_time'))
            ->order($order)
            ->paginate(10,false,['page'=>input("page"),'path'=>'javascript:AjaxPage([PAGE]);']);
        $this->assign('phone_list', $phone_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, sort: order},
    function (data) {
        // console.log(data);return;
        $('.table-responsive').html(data)
}

html模版的page页面

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

    

        

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

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

{$phone_list->render()}