Javascript vue.js表格分页，ajax异步加载数据

Posted 2023-04-22

参考技术A 分页一般和表格一起用，分页链接作为表格的一部分，将分页链接封装成一个独立的组件，然后作为子组件嵌入到表格组件中，这样比较合理。
效果：
代码：
1.注册一个组件
js
Vue.component('pagination',
template:'#paginationTpl',
replace:true,
props:['cur','all','pageNum'],
methods:
//页码点击事件
btnClick:
function(index)
if(index
!=
this.cur)
this.cur
=
index;


,
watch:
"cur"
:
function(val,oldVal)

this.$dispatch('page-to',
val);

,
computed:
indexes
:
function()
var
list
=
[];
//计算左右页码
var
mid
=
parseInt(this.pageNum
/
2);//中间值
var
left
=
Math.max(this.cur
-
mid,1);
var
right
=
Math.max(this.cur
+
this.pageNum
-
mid
-1,this.pageNum);
if
(right
>
this.all
)

right
=
this.all
while
(left
<=
right)
list.push(left);
left
++;

return
list;
,
showLast:
function()
return
this.cur
!=
this.all;
,
showFirst:
function()
return
this.cur
!=
1;


);
模板：
<script
type="text/template"
id="paginationTpl">
<nav
v-if="all
>
1">
<ul
class="pagination">
<li
v-if="showFirst"><a
href="javascript:"
@click="cur--">«</a></li>
<li
v-for="index
in
indexes"
:class="
'active':
cur
==
index">
<a
@click="btnClick(index)"
href="javascript:">
index
</a>
</li>
<li
v-if="showLast"><a
@click="cur++"
href="javascript:">»</a></li>
<li><a>共<i>all</i>页</a></li>
</ul>
</nav>
</script>
html：
<div
id='item_list'>
...
<pagination
:cur="1"
:all="pageAll"
:page-num="10"
@page-to="loadList"></pagination>
</div>
当点击分页链接的时候，通过watch
cur，子组件分发
page-to
事件，通过
@page-to="loadList"
标签指定使用父组件
loadList
方法处理事件，父组件接收到page值然后ajax加载数据，根据服务端返回计算并更新自身的
pageAll
值，因为子组件prop通过
:all="pageAll"
动态绑定了父组件的pageAll对象，所以子组件会联动更新。
附上一个简单的表格组件例子:
var
vm
=
new
Vue(
el:
"#item_list",
data:

items
:
[],
//分页参数
pageAll:0,
//总页数,根据服务端返回total值计算
perPage:10
//每页数量
,
methods:

loadList:function(page)
var
that
=
this;
$.ajax(
url
:
"/getList",
type:"post",
data:"page":page,"perPage":this.perPage,
dataType:"json",
error:function()alert('请求列表失败'),
success:function(res)
if
(res.status
==
1)

that.items
=
res.data.list;
that.perPage
=
res.data.perPage;
that.pageAll
=
Math.ceil(res.data.total
/
that.perPage);//计算总页数


);
,
//初始化
init:function()
this.loadList(1);


);
vm.init();
感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

使用 Vue.Js / Inertia.js 和 Laravel 对结果进行分页

【中文标题】使用 Vue.Js / Inertia.js 和 Laravel 对结果进行分页

【英文标题】：Paginate results with Vue.Js / Inertia.js and Laravel

【发布时间】：2020-07-19 09:53:51

【问题描述】：

我正在尝试在 Vue.Js 中对来自 Laravel 的数据进行分页。我也在使用 Inertia.js。

在我的 Laravel 控制器中，我有：

    $data['participants'] = User::with('groups')->select('id', 'name')->paginate(2);
    return inertia('Dashboard/Participants', $data);

这在 Vue 中连续输出了我的两个用户。我也期望链接对象用于分页。我在我的 Vue 道具中没有看到这个。

如果我检查我的 Vue 道具，我有以下对象：

participants:Object
 current_page:1
 data:Array[2]
 first_page_url:"http://localhost:3000/dashboard/participants?page=1"
 from:1
 last_page:51
 last_page_url:"http://localhost:3000/dashboard/participants?page=51"
 next_page_url:"http://localhost:3000/dashboard/participants?page=2"
 path:"http://localhost:3000/dashboard/participants"
 per_page:2
 prev_page_url:null
 to:2
 total:101

如果我：

dd($data['participants']->links());

在控制器中我可以看到：

Illuminate\View\View #316 ▼
  #factory: Illuminate\View\Factory #310 ▶
  #engine: Facade\Ignition\Views\Engines\CompilerEngine #328 ▶
  #view: "pagination::bootstrap-4"
  #data: array:2 [▶]
  #path: "/Users/ejntaylor/Documents/Laravel/motional/vendor/laravel/framework/src/Illuminate/Pagination/resources/views/bootstrap-4.blade.php"

我一直在寻找PingCRM 的灵感，但没有运气 - 我在链接中引用了。帮助表示赞赏。

【问题讨论】：

这里有同样的问题。我与惯性无处可去。你找到解决办法了吗？

【参考方案1】：

我遇到了类似的问题，并注意到基本的 links() 不适用于 Inertia 和 Vue，因此我制作了一个简单的 Vue 组件，在其中我使用从 Inertia 渲染方法获得的 Paginator 对象，它对我来说效果很好没有 ServiceProvider 解决方法。

我可以用

public function index()

    return Inertia::render('MyUserList',[
        'paginator' => User::paginate(10)
    ]);

我通常会这样做。 然后我将分页器对象绑定到我的 Vue 组件，这样我就可以利用它来创建一个基本的分页器组件。这样我就可以在任何我想要的地方使用和重复使用<Paginator :paginator="paginator" />。

<template>
    <Paginator :paginator="paginator" />
</template>

<script>
import Paginator from "@/Components/Paginator";
export default 
    props: 
            paginator: Object
        ,

</script>

我还创建了一个包，因此您可以根据需要通过 composer 将其拉入。 请参阅https://github.com/svnwa/InertiaVuePaginator 了解更多信息以及我创建的分页器组件的“组件”文件夹。 我希望它在未来对其他人有所帮助:)

【参考方案2】：

似乎默认的 Laravel 分页不适用于 Inertia.JS，因此您必须前往 AppServiceProvider.php 文件并添加以下内容才能使分页正常工作。

这取自PingCRM

 protected function registerLengthAwarePaginator()

    $this->app->bind(LengthAwarePaginator::class, function ($app, $values) 
        return new class(...array_values($values)) extends LengthAwarePaginator 
            public function only(...$attributes)
            
                return $this->transform(function ($item) use ($attributes) 
                    return $item->only($attributes);
                );
            

            public function transform($callback)
            
                $this->items->transform($callback);

                return $this;
            

            public function toArray()
            
                return [
                    'data' => $this->items->toArray(),
                    'links' => $this->links(),
                ];
            

            public function links($view = null, $data = [])
            
                $this->appends(Request::all());

                $window = UrlWindow::make($this);

                $elements = array_filter([
                    $window['first'],
                    is_array($window['slider']) ? '...' : null,
                    $window['slider'],
                    is_array($window['last']) ? '...' : null,
                    $window['last'],
                ]);

                return Collection::make($elements)->flatMap(function ($item) 
                    if (is_array($item)) 
                        return Collection::make($item)->map(function ($url, $page) 
                            return [
                                'url' => $url,
                                'label' => $page,
                                'active' => $this->currentPage() === $page,
                            ];
                        );
                     else 
                        return [
                            [
                                'url' => null,
                                'label' => '...',
                                'active' => false,
                            ],
                        ];
                    
                )->prepend([
                    'url' => $this->previousPageUrl(),
                    'label' => 'Previous',
                    'active' => false,
                ])->push([
                    'url' => $this->nextPageUrl(),
                    'label' => 'Next',
                    'active' => false,
                ]);
            
        ;
    );