Question

我在CodeIgniter工作，我有一个由我的控制器创建的视图，它向我发送了许多不同的空缺。我视图中的动态代码如下所示：

<div class="row vacancy-grid">
    <?php
    foreach ($vacancies as $vacancy) {
    ?>
        <div class="col-lg-3 vacancy-item">
            <div class="vacancy-header">
                <img src="<?php
                    if (isset($vacancy[0]->banner)) {
                        echo base_url() . VACANCY_IMAGES . $vacancy[0]->banner;
                    }else {
                        echo base_url() . IMAGES_BASE . "noimage.png";
                    }
                ?>" alt="Logo Lochtfest" />
            </div>
            <div class="vacancy-info">
                <h2><?php echo $vacancy[0]->name; ?></h2>
                <?php
                if (!empty($vacancy[1])) {
                ?>
                    <ul class="list-interests">
                        <?php
                        foreach ($vacancy[1] as $interest) {
                        ?>
                            <li><?php echo $interest; ?></li>
                        <?php
                        }
                        ?>
                    </ul>
                <?php
                }
                if (!empty($vacancy[2])) {
                    ?>
                    <ul class="list-skills">
                        <?php
                        foreach ($vacancy[2] as $skill) {
                            ?>
                            <li><i class="fa fa-check"></i><?php echo $skill; ?></li>
                            <?php
                        }
                        ?>
                    </ul>
                    <?php
                }
                ?>
                <ul class="list-logistics">
                    <li>
                        <i class="fa fa-map-marker"></i>
                        <?php echo $vacancy[0]->address_line_1; ?> <br />
                        <?php echo $vacancy[0]->address_postal_code . ", " . $vacancy[0]->address_city; ?>
                    </li>
                    <li class="bold-sm"><i class="fa fa-calendar"></i> <?php echo $vacancy[3]; ?></li>
                </ul>
                <ul class="list-type">
                    <?php
                    if ($vacancy[0]->occupancy_kind == 1) {
                    ?>
                        <li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li>
                    <?php
                    } else if ($vacancy[0]->occupancy_kind == 2) {
                    ?>
                        <li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li>
                    <?php
                    } else {
                    ?>
                        <li><img src="<?php echo base_url(); ?>design/img/individueel-grey.svg" alt="Individu" /></li>
                        <li><img src="<?php echo base_url(); ?>design/img/groepen-grey.svg" alt="Groepen" /></li>
                    <?php
                    }
                    ?>
                </ul>
            </div>
        </div>
    <?php
    }
    ?>
</div>

首先，$ vacaccies将包含所有空缺，因为尚未选择任何过滤器。所以我有一些我希望用户能够使用的过滤器。我的问题是如何在不需要页面刷新的情况下将所有这些内容重新加载到同一个地方？我可以通过页面刷新来完成它，但我希望它没有一个。我的JS代码如下所示：

//This is for the filters in the vacancy overview page
filteredVacancies = $('#filterbtn'),
    ajaxOptions4 = {
        type: 'POST',
        url: "http://localhost/codeigniter/codeigniter/dashboard/vacancy/vacancyFiltering",
        dataType: 'json'
    };

filteredVacancies.click(function (ev) {
    var options4 = $.extend({}, ajaxOptions4, {
        data: {
            "datefrom": $('#date-from').datepicker('getDate'),
            "dateto": $('#date-to').datepicker('getDate')
        }
    });
    ev.preventDefault();

    // ajax done & fail
    $.ajax(options4).done(function (data) {
        if (data.result === 'success') {
            //TODO: how to do this???
        }
    }).fail(function (xhr, status, error) {
        console.warn(xhr);
        console.warn(status);
        console.warn(error);
    });
});

Answer 1

这是你能做的。

使用handlebars从DOM元素中创建模板。 foreach中的代码。
现在，在您的成功块中，您可以根据从AJAX调用收到的JSON数据来解析这些元素。

Answer 2

您要实现的目标的最佳实践如下：

function()中的controller会有一些参数来过滤您的数据。
如果设置了该参数，则需要返回已过滤的数据
如果未将过滤器参数设置或设置为all，则需要返回完整数据。

这样您就可以处理每个过滤方案。

伪代码就像这样

function get_vacancies($filter="")
{
   if($filter=="")
      // Return all vacancies
   else
     // Return filtered vacancies
}

通过AJAX加载不同的php对象

2 个答案: