.net vue + pagination 实现数据数据绑定分页

最新推荐文章于 2025-06-30 21:40:09 发布

Aiden°D

最新推荐文章于 2025-06-30 21:40:09 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： C#后台代码文章标签： C# .net 分页 pagination vue

本文链接：https://blog.youkuaiyun.com/weixin_43260645/article/details/82812377

C#后台代码专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用Vue.js结合layui和自定义分页组件实现动态数据展示和分页功能的前端页面案例。通过封装AJAX和分页功能，实现了从后端获取数据并动态显示在前端页面上，同时提供了分页导航。文章详细展示了代码结构和实现过程。

前台页面

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <!-- layui引用文件 -->
    <link href="~/scripts/layui/css/layui.css" rel="stylesheet" />
    <script src="~/scripts/jquery-3.3.1.min.js"></script>
    <script src="~/scripts/layui/layui.all.js"></script>
    <!-- pagination引用文件 -->
    <link href="~/scripts/pagination/common/reset.css" rel="stylesheet" />
    <link href="~/scripts/pagination/common/common.css" rel="stylesheet" />
    <link href="~/scripts/pagination/pagination.css" rel="stylesheet" />
    <script src="~/scripts/pagination/jquery.pagination.js"></script>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="~/scripts/vue.min.js"></script>
    <script src="~/scripts/common/common.js"></script>
    <title>Index</title>
</head>
<body>
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md12">
                <div id="app">
                    <table class="layui-table">
                        <thead></thead>
                        <tbody>
                        <tr v-for="item in jsonData">
                            <td>{{item.ID}}</td>
                            <td>{{item.NAME}}</td>
                            <td v-if="item.SEX == '男'">Male</td>
                            <td v-else-if="item.SEX == '女'">FeMale</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md9">
                <div class="M-box" id="Mbox">
                    
                </div>
            </div>
        </div>
    </div>
    <!--Vue实现功能文件-->
    <script src="~/scripts/js/default_index.js"></script>
</body>
</html>

common.js 对ajax和pagination初始化进行小封装

//AJAX 封装
function ajaxRun(url, callback, postData) {
    $.ajax({
        async: false,//异步请求 default:true  同步请求
        url: url,  //AJAX文件路径http://localhost:2259/
        type: 'post', //post方式提交代码
        data: postData,
        datetype: 'json',
        success: callback,
        error: function (state) {
            alert('信息加载出错');
        }
    });
}
//初始化分页
function initMBox(table_id, totalData, showData, callback) {
    $(`#${table_id}`).pagination({
        callback: callback,
        coping: true,
        keepShowPN: true,
        isHide: true,
        jump: true,
        jumpBtn: 'go',
        prevContent: '<',
        nextContent: '>',
        totalData: totalData, //总数据量（条）
        showData: showData, //每页展示的数据量
    }, callback);
}

default_index.js

var app = new Vue({
    el: "#app",
    data: {
        jsonData: [
        ],
        totalData:[],
        totalCount:0,
        showCount:20
    }
})
//初始化
$(function() {
    ajaxRun("/Default/GetUserList", callbackAjax, {});
    initMBox('Mbox', app.totalCount, app.showCount, callbackMbox);
})
//pagination回调方法
function callbackMbox(api) {
    let number = api.getCurrent();
    let showNumber = number * app.showCount > app.totalCount ? app.totalCount : number * app.showCount;
     
    let json = app.totalData.filter(function (e, i) {
        return i >= (number - 1) * app.showCount && i < showNumber;
    })
    for (let i = 0; i < json.length; i++) {
        if (json[i].SEX == 1) {
            json[i].SEX = '男'
        } else {
            json[i].SEX = '女'
        }
    }
    app.jsonData = json;
}
//ajax回调方法
function callbackAjax(data) {
    data = eval(`(${data})`);
    app.totalData = data;
    app.totalCount = data.length;
}

后台代码就很简单了，数据获取

public ActionResult GetUserList()
{
    var list = db.GetTable<Table_USERS>().Where(c => c.ID.ToString() != "").ToList().ToList();
    string json = JsonConvert.SerializeObject(list);
    return Content(json);
}

实现效果
实现效果，由于数据过多，分页的css样式得调一下，不过一般使用页数够用了