KNP 分页：如何使用 javascript 获取与给定页面匹配的分页页面内容

Question

一个项目有一个允许编辑膳食实体的页面。 Meal 与 Food 实体具有 ManyToMany 关系。 编辑页面显示已为这顿饭选择的食物列表，以及可用食物的 KNP 分页列表。 当单击可用食物时，脚本会重写所选食物列表并重写可用食物列表。 到目前为止，一切都很好。

但是，脚本会自下而上地构建可用列表。 因此，例如，如果选择了第 3 页上的项目，则页面选择器会将第 3 页显示为活动页面，但该页面的内容是第 1 页的内容。我想让第 1 页处于活动状态或页面内容适合活动页码。

如果这是有道理的，这里有一些相关的代码。 （注意：很明显，我对 javascript 并不流利。）

add-food.js（关键变量是pageNumber ）：

$('td').on('click', function (e) {
    foodId = $(e.currentTarget).data('foodid');
    mealId = $("#mealid").data("mealid");
    var pageNumber = $('li.active').first().text().trim();
    var pageLimit = $("#mealid").data("pagelimit");
    $packet = JSON.stringify([foodId, mealId]);
    $.post('http://diet/meal/' + mealId + '/addFoodToMeal', $packet, function (response) {
        editFoods = $.parseJSON(response);
        var readyToEat = $.parseJSON(editFoods[0]);
        var pantry = $.parseJSON(editFoods[1]);
        var table = document.getElementById('ready_foods')
        $('#ready_foods tr:not(:first)').remove();
        $.each(readyToEat, function(key, food) {
            var row = table.insertRow(-1);
            var cell = row.insertCell(0);
            cell.innerHTML = food;
        })
        var table = document.getElementById('pantry')
        $('#pantry tr:not(:first)').remove();
        
        $.each(pantry.slice(0, pageLimit), function(key, array) {
            food = array.split(",");
            foodId = food[0];
            foodName = food[1];
            var row = table.insertRow(-1);
            var cell = row.insertCell(0);
            cell.innerHTML = foodName;
            cell.setAttribute('data-foodid', foodId);
        })
    });
});

编辑.html.twig：

{% extends 'base.html.twig' %}

{% block title %}Edit Meal{% endblock %}

{% block body %}
    <h1>Edit Meal</h1>
    <div id="mealid" data-mealid="{{meal.id}}" data-pagelimit="{{ pageLimit }}"></div>
    {{ form_start(form, {'attr': {'class': 'js-meal-form'}}) }}
    <div class="row">
        <div class="col-6">
            {{ include('meal/_form.html.twig') }}
                <table class="table" id="ready_foods">
                    <thead>
                        <tr>
                            <th>Ready to eat</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for food in meal.foods %}
                            <tr>
                                <td>{{ food.foodName }}</td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>            
        </div>
        <div class="col-6">
            {{ include('food/_foods.html.twig') }}
        </div>
    </div>
    <button class="btn btn-info">{{ button_label|default('Save') }}</button>
    {{ form_end(form) }}
    <a href="{{ path('app_meal_index') }}">back to list</a>

    {{ include('meal/_delete_form.html.twig') }}
{% endblock %}
{% block javascripts %}
    {{ parent() }}
    <script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js" defer ></script>
    <script>
        $(document).ready(function () {
            $('.js-datepicker').datepicker({
                format: 'yyyy-mm-dd'
            });
        });
    </script>
    {{ encore_entry_script_tags('add-food') }}
{% endblock %}

_foods.html.twig（发生分页的地方）

{# templates/food/_foods.html.twig #}
<h3>Available foods</h3>
<div class="input-group mb-3">
    <input type="text"
           name="q"
           class="form-control"
           value="{{ app.request.query.get('q') }}"
           placeholder="Search..."
           >
    <div class="input-group-append">
        <button type="submit"
                class="btn btn-outline-secondary">
            <span class="fa fa-search"></span>
            Search
        </button>
    </div>
</div>

{% if pagination is not empty %}
    <table class="table" id="pantry">
        <thead>
            <tr>
                <th>Click name to add to meal</th>
            </tr>
        </thead>
        <tbody>
            {% for food in pagination %}
                <tr>
                    <td data-foodid={{ food.id }}>{{ food.foodName }}</td>
               </tr>
            {% else %}
                <tr>
                    <td colspan="3">no records found</td>
                </tr>
            {% endfor %}
        </tbody>
    </table>
    {{ knp_pagination_render(pagination) }}
{% endif %}

Answer 1

事实证明，有一种简单的方法可以使分页的第 1 页处于活动状态 - 因为第一页将由脚本呈现。 两行：

        $('li.active').removeClass('active');
        $('li.page-item:nth-of-type(2)').addClass('active');