TP6内置分页类重写链接样式

70 阅读1分钟

代码:

<style>
    .table_title_1,
    .table_row_1 {
        width: 10%;
    }

    .table_title_2,
    .table_row_2 {
        width: 10%;
    }

    .table_title_3,
    .table_row_3 {
        width: 10%;
    }

    .table_title_4,
    .table_row_4 {
        width: 10%;
    }

    .table_title_5,
    .table_row_5 {
        width: 10%;
    }

    .table_title_6,
    .table_row_6 {
        width: 10%;
    }

    .table_title_7,
    .table_row_7 {
        width: 10%;
    }

    .table_title_8,
    .table_row_8 {
        width: 10%;
    }

    .table_title_9,
    .table_row_9 {
        width: 10%;
    }

    .table_title_10,
    .table_row_10 {
        width: 10%;
        text-align: right;
    }

    .pagination_box{
        padding: 30px 0 10px 0;
    }
    /*分页样式修改,可封装到公共样式文件*/
    .pagination {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .pagination li {
        list-style: none;
    }

    .pagination li a {
        background-color: rgb(213, 239, 255);
        font-size: 12px;
        margin-right: 10px;
        cursor: pointer;
        display: inline;
        padding: 4px 9px;
        border-radius: 2px;
        color: #333;
    }

    .pagination .active span {
        background-color: rgb(92, 163, 255);
        display: inline;
        margin-right: 10px;
        font-size: 12px;
        padding: 4px 9px;
        border-radius: 2px;
        color: #fff;
        
    }

    .pagination .disabled span {
        background-color: rgb(234, 234, 234);
        display: inline;
        margin-right: 10px;
        font-size: 12px;
        padding: 4px 9px;
        border-radius: 2px;
         
    }
</style>

<div class="content">
    <div class="content_title">用户管理-测试</div>
    <div class="content_table">
        <div class="table_title">
            <div class="table_title_1">id</div>
            <div class="table_title_2">用户名</div>
            <div class="table_title_3">昵称</div>
            <div class="table_title_4">tel</div>
            <div class="table_title_5">性别</div>
            <div class="table_title_6">地区</div>
            <div class="table_title_7">ip</div>
            <div class="table_title_8">成就值</div>
            <div class="table_title_9">创建日期</div>
            <div class="table_title_10">操作</div>
        </div>
        {volist name="list" id="vo"}
        <div class="table_row">
            <div class="table_row_1">{$vo.id}</div>
            <div class="table_row_2">{$vo.username}</div>
            <div class="table_row_3">{$vo.nicheng}</div>
            <div class="table_row_4">{$vo.tel}</div>
            <div class="table_row_5">{$vo.sex}</div>
            <div class="table_row_6">{$vo.province}</div>
            <div class="table_row_7">{$vo.ip}</div>
            <div class="table_row_8">{$vo.chengjiu}</div>
            <div class="table_row_9">{$vo.create_date}</div>
            <div class="table_row_10"></div>
        </div>
        {/volist}
    </div>
</div>

<div class="pagination_box">
    {$list|raw}
</div>


<script>

    $(function () {
        pageClick('/admin/user_admin2/', '#right_content');
    })

    /*分页跳转函数,可封装到公共页面*/
    function pageClick(now_url, dom_id) {
        $(".pagination li a").removeAttr("href");//禁用原href属性
        let now_page = $(".pagination .active span").text();
        let next_page;
        let pre_page;
        $(".pagination li a").click(function () {
            let a = $(this).text();
            if(a == "»"){
                next_page = Number(now_page) + 1;
                $(dom_id).load(now_url + 'page/' + next_page);
            }else if(a == "«"){
                pre_page = Number(now_page) - 1;
                $(dom_id).load(now_url + 'page/' + pre_page);
            }else{
                $(dom_id).load(now_url + 'page/' + a);
            }  
        })
    }

</script>