Question

我有一个标签字段。这些包含年份。我需要分别显示所有这些的分页数。例如我有;

全部 - 2018年 - 2017年 - 2016年

2018标签包含30个值。 2017标签= 15值。 2016 tab = 15值。所有选项卡都包含= 60值。

当我点击随机标签时，分页号必须更改。

标签：

<ul id="tab">
<li>All</li>
<li>2018</li>
<li>2017</li>
</ul>

标签内的

：

<div id="wrapper">
<div class="contents">
    @foreach($projects as $project)
    <div>{{$project->created_at}}</div>
    <div><img src="{{('/storage/'.$project->image)}}"/></div>
    @endforeach
</div>
<div class="contents">
    @foreach($projects2018 as $project)
        <div>{{$project->created_at}}</div>
        <div><img src="{{('/storage/'.$project->image)}}"/></div>
    @endforeach
</div>
<div class="contents">
    @foreach($projects2017 as $project)
        <div>{{$project->created_at}}</div>
        <div><img src="{{('/storage/'.$project->image)}}"/></div>
    @endforeach
</div>
<div class="contents">
    @foreach($projects2016 as $project)
    <div>{{$project->created_at}}</div>
    <div><img src="{{('/storage/'.$project->image)}}"/></div>
    @endforeach
</div>

我创建了这个.contents字段。

使用我的脚本代码。标签正在发生变化，价值即将来临。这是我的控制者：

$projects = Project::latest()->paginate(50);
    $projects2018 = Project::whereYear('created_at', '=', 2018)->paginate(50);
    $projects2017 = Project::whereYear('created_at', '=', 2017)->paginate(50);
    $projects2016 = Project::whereYear('created_at', '=', 2016)->paginate(50);

在这种情况下，控制器只获得50个值。之后，js将这50个值分页。 10比10.我的意思是5有5页。但所有值都在同一时间下载。单击时我需要下载2-3-4-5页的值。不能同时下载所有值！这很无聊。我无法弄清楚如何制作。

这也是我的javascript代码。

<script>
$(document).ready(function()
{

    $("#tab").tabpager({
        items: 10,
        contents: 'contents',
        time: 300,
        previous: 'Geri',
        next: 'İleri',
        start: 1,
        position: 'top',
        scroll: true
    });
});

仍然想知道解决方案......

Answer 1

Laravel默认使用get参数page解析当前页面，即example.com/?page=3此请求，分页器将当前页面解析为第3页。

当您查看declaration of paginate method：

时，可以更改这些行为

public function paginate($perPage = null, $columns = ['*'], $pageName = 'page', $page = null)

您可以创建自己的分页方法，例如，通过更改第三个参数：

$projects2017 = Project::whereYear('created_at', '=', 2017)
    ->paginate(50, ['*'], 'p2017');
$projects2016 = Project::whereYear('created_at', '=', 2016)
    ->paginate(50, ['*'], 'p2016');

然后，此请求example.com/?p2017=2&p2016=3将查询2017年项目的第二页和2016年项目的第三页。

或者使用相同输出的另一种方法，通过第四个参数明确指定页面：

$projects2017 = Project::whereYear('created_at', '=', 2017)
    ->paginate(50, ['*'], 'page', 2);
$projects2016 = Project::whereYear('created_at', '=', 2016)
    ->paginate(50, ['*'], 'page', 3);

Answer 2

补充Ben的回答。在我们的控制器中添加我们自己的分页参数之后。

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:h="http://java.sun.com/jsf/html" >
<h:head>
    <title>Test React JSF</title>
    <link rel="stylesheet" type="text/css" href="../../../../../resources/Adamantium/adamantium-layout/css/font-awesome.css"/>
    <link rel="stylesheet" type="text/css" href="../../../../../resources/css/style.css"/>

    <link  rel="stylesheet"  type="text/css" href="./static/css/main.1ab75c23.chunk.css"/> 


</h:head>

<h:body   > 


    <h2>  React vanilla </h2> 

    <!-- We will put our React component inside this div. -->
    <div id="like_button_container"></div>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <script src="https://unpkg.com/react@16/umd/react.development.js"  ></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"  ></script>

    <!-- Don't use this in production: --> 
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>
    <br/>
    <br/>
    <br/>

    <h2>  JSX </h2> 
    <div id="babel"></div>
    <script type="text/babel">

        ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('babel')
        );

    </script>
    <br/>
    <br/>
    <br/>


    <script src="./static/js/1.6105a37c.chunk.js" type="application/javascript" ></script>
    <script src="./static/js/main.7bbc540b.chunk.js" type="application/javascript" ></script>

    <h2>  React JSXs Bundles </h2> 

    <div id="root"></div>


</h:body>

在我们看来，'use strict'; const e = React.createElement; class LikeButton extends React.Component { constructor(props) { super(props); this.state = { liked: false }; } render() { if (this.state.liked) { return 'You liked this.'; } return e( 'button', { onClick: () => this.setState({ liked: true }) }, 'Like' ); } } const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer);而非使用$projects2017 = Project::whereYear('created_at', '=', 2017) ->paginate(50, ['*'], 'p2017'); $projects2016 = Project::whereYear('created_at', '=', 2016) ->paginate(50, ['*'], 'p2016');使用

projects.blade.php

反之亦然，因此，当您在一个选项卡上更改页面时，它会保存另一个选项卡的当前页面，链接的外观类似于{{$projects2017->render()}}

我在 Lavarel 5.7 中尝试了此方法，并且有效！

选项卡内容中的多个分页

2 个答案: