我正在为SilverStripe网站上的页面构建一些分页，默认情况下首先显示所有文章，但用户可以通过从下拉控件中选择一年来选择要查看的文章。
这是文章的模板。现在我有代码，当页面首次加载或重新加载并且从服务器抓取所有文章时添加分页：
<select id="SelectNewsYear">
<option value="">Select a year</option>
<% loop $GroupedNewsByDate.GroupedBy(PublishYear) %>
<option value="$PublishYear">$PublishYear</option>
<% end_loop %>
<option value="all">Show all</option>
</select>
<br /><br />
<div class="RecentNews">
<% loop $PaginatedReleases %>
$ArticleDate.format("F j, Y"), <a href="$URLSegment">$H1</a><br />
<% end_loop %>
<% if $PaginatedReleases.MoreThanOnePage %>
<% if $PaginatedReleases.NotFirstPage %>
<a class="prev" href="$PaginatedReleases.PrevLink">Prev</a>
<% end_if %>
<% loop $PaginatedReleases.Pages %>
<% if $CurrentBool %>
$PageNum
<% else %>
<% if $Link %>
<a href="$Link">$PageNum</a>
<% else %>
...
<% end_if %>
<% end_if %>
<% end_loop %>
<% if $PaginatedReleases.NotLastPage %>
<a class="next" href="$PaginatedReleases.NextLink">Next</a>
<% end_if %>
<% end_if %>
</div>
Page.php中的PaginatedReleases函数：
//Returns a paginted list of news releases
public function PaginatedReleases(){
$newslist = NewsReleaseArticlePage::get()->sort('ArticleDate', "DESC");
return new PaginatedList($newslist, $this->getRequest());
}
现在的问题是如何在从下拉列表中选择一年时确定如何维护分页功能。最初，我并不关心分页，因为我更关心下拉列表的功能。这是我目前设置的jQuery和AJAX代码，它从下拉列表中获取年份值并将其传递给服务器到相应的函数：
(function($) {
$(document).ready(function() {
var SelectNewsYear = $('#SelectNewsYear');
var month = new Array();
month[0] = "January";
month[1] = "February";
month[2] = "March";
month[3] = "April";
month[4] = "May";
month[5] = "June";
month[6] = "July";
month[7] = "August";
month[8] = "September";
month[9] = "October";
month[10] = "November";
month[11] = "December";
SelectNewsYear.change(function() {
if (SelectNewsYear.val() != "" && SelectNewsYear.val() != null && SelectNewsYear.find('option:selected').attr('value') !="all") {
sendYear();
}
else{
showAll();
}
});
//get all articles by the year selected
function sendYear(){
var year = SelectNewsYear.find('option:selected').attr('value');
$.ajax({
type: "POST",
url: "/home/getNewsByYear/"+year,
dataType: "json"
}).done(function (response) {
var list = '';
var newsSection = $('.RecentNewsByYear');
for (var i=0;i<response.length;i++){
var newsDate = new Date(response[i].date);
var monthFullName = month[newsDate.getUTCMonth()];
list += monthFullName + " " + newsDate.getUTCDate() +", " +newsDate.getFullYear() + ', ' + '<a href="' + response[i].article + '"target="_blank">' + response[i].title +"</a> <br />";
}
newsSection.empty();
newsSection.append(list);
});
}
});
}(jQuery));
$ = jQuery.noConflict();
来自Page.php的getNewsByYear函数：
//Get all recent news by year based on selected year from dropdown
public function getNewsByYear(){
//Get the year selected by the dropdown
$newsReleaseYear = $this->getRequest()->param('ID');
//Group together all news that are associated with that selected year
$newsReleases = NewsReleaseArticlePage::get();
$return = array();
//put the news releases into the array that match the selected year
foreach($newsReleases as $newsRelease){
$newsDate = date("Y", strtotime($newsRelease->ArticleDate));
if($newsDate == $newsReleaseYear){
$return[] = array(
'title' => $newsRelease->H1,
'date' => $newsRelease->ArticleDate,
'article' => $newsRelease->URLSegment
);
}
}
return json_encode($return);
}
getNewsByYear函数可以正常工作，但我不知道如何在此处合并SilverStripe PaginationList功能。我想知道是否有办法在不依赖json编码数据的情况下返回所选文章？
答案 0 :(得分：4)
当您返回JSON以从JSON构建HTML标记时，肯定还有改进的空间......
我认为以不使用JS的方式编写应用程序逻辑是很好的做法，然后添加JS以逐步增强应用程序。这样你就不会锁定每个非JS设备/阅读器/用户。
所以这就是我要做的事情（准备广泛回答）：
首先，您希望能够按年过滤您的记录。我认为您通过URL启用过滤的方法很好，所以我们要做的就是：
在控制器中，添加/修改以下方法：
public function PaginatedReleases($year = null)
{
$list = NewsReleaseArticlePage::get()->sort('ArticleDate', 'DESC');
if ($year) {
$list = $list->where(array('YEAR("ArticleDate") = ?' => $year));
}
return PaginatedList::create($list, $this->getRequest());
}
这将允许您通过传递$year参数来获取所有条目，或仅获取特定年份的条目。
public static $allowed_actions = array(
'year' => true
);
public function year()
{
$year = $this->request->param('ID');
$data = array(
'Year' => $year,
'PaginatedReleases' => $this->PaginatedReleases($year)
);
return $data;
}
运行dev/build后，您应该已经能够通过更改网址（例如mypage/year/2016或mypage/year/2015等）逐年过滤您的参赛作品。
将以下内容添加到控制器中以创建表单以过滤条目：
public function YearFilterForm()
{
// get an array of all distinct years
$list = SQLSelect::create()
->addFrom('NewsReleaseArticlePage')
->selectField('YEAR("ArticleDate")', 'Year')
->setOrderBy('Year', 'DESC')
->addGroupBy('"Year"')->execute()->column('Year');
// create an associative array with years as keys & values
$values = array_combine($list, $list);
// our fields just contain the dropdown, which uses the year values
$fields = FieldList::create(array(
DropdownField::create(
'Year',
'Year',
$values,
$this->getRequest()->param('ID')
)->setHasEmptyDefault(true)->setEmptyString('(all)')
));
$actions = FieldList::create(array(
FormAction::create('doFilter', 'Submit')
));
return Form::create($this, 'YearFilterForm', $fields, $actions);
}
实施doFilter功能。它只是重定向到正确的URL，具体取决于选择的年份：
public function doFilter($data, $form)
{
if(empty($data['Year'])){
return $this->redirect($this->Link());
} else {
return $this->redirect($this->Link('year/' . $data['Year']));
}
}
不要忘记将表单名称添加到allowed_actions：
public static $allowed_actions = array(
'YearFilterForm' => true, // <- this should be added!
'year' => true
);
现在从模板中删除<select>输入字段，并将其替换为：$YearFilterForm。
运行dev/build后，您应该有一个页面，其中包含允许按年份过滤的表单（带有工作分页）
使用AJAX，我们希望只能加载页面的更改部分。因此，首先要做的是：
创建模板Includes/ArticleList.ss
<div id="ArticleList" class="RecentNews">
<% loop $PaginatedReleases %>
$ArticleDate.format("F j, Y"), <a href="$URLSegment">$H1</a><br />
<% end_loop %>
<% if $PaginatedReleases.MoreThanOnePage %>
<% if $PaginatedReleases.NotFirstPage %>
<a class="prev pagination" href="$PaginatedReleases.PrevLink">Prev</a>
<% end_if %>
<% loop $PaginatedReleases.Pages %>
<% if $CurrentBool %>
$PageNum
<% else %>
<% if $Link %>
<a href="$Link" class="pagination">$PageNum</a>
<% else %>
...
<% end_if %>
<% end_if %>
<% end_loop %>
<% if $PaginatedReleases.NotLastPage %>
<a class="next pagination" href="$PaginatedReleases.NextLink">Next</a>
<% end_if %>
<% end_if %>
</div>
然后可以将您的页面模板拆分为：
$YearFilterForm
<% include ArticleList %>
在dev/build之后，一切都应该像以前一样工作。
由于这会影响对year和index（未过滤条目）的调用，请在控制器中创建一个辅助方法，如下所示：
protected function handleYearRequest(SS_HTTPRequest $request)
{
$year = $request->param('ID');
$data = array(
'Year' => $year,
'PaginatedReleases' => $this->PaginatedReleases($year)
);
if($request->isAjax()) {
// in case of an ajax request, render only the partial template
return $this->renderWith('ArticleList', $data);
} else {
// returning an array will cause the page to render normally
return $data;
}
}
然后，您可以添加/修改index和year方法，使其看起来完全相同：
public function year()
{
return $this->handleYearRequest($this->request);
}
public function index()
{
return $this->handleYearRequest($this->request);
}
(function($) {
$(function(){
// hide form actions, as we want to trigger form submittal
// automatically when dropdown changes
$("#Form_YearFilterForm .Actions").hide();
// bind a change event on the dropdown to automatically submit
$("#Form_YearFilterForm").on("change", "select", function (e) {
$("#Form_YearFilterForm").submit();
});
// handle form submit events
$("#Form_YearFilterForm").on("submit", function(e){
e.preventDefault();
var form = $(this);
$("#ArticleList").addClass("loading");
// submit form via ajax
$.post(
form.attr("action"),
form.serialize(),
function(data, status, xhr){
$("#ArticleList").replaceWith($(data));
}
);
return false;
});
// handle pagination clicks
$("body").on("click", "a.pagination", function (e) {
e.preventDefault();
$("#ArticleList").addClass("loading");
$.get(
$(this).attr("href"),
function(data, status, xhr){
$("#ArticleList").replaceWith($(data));
}
);
return false;
});
});
})(jQuery);
您现在拥有一个可以在非JS设备上正常降级的解决方案。通过下拉列表和分页进行过滤是启用AJAX的。标记没有在模板中的JS 和中定义，它只是负责标记的SilverStripe模板。
剩下要做的就是在内容刷新时添加一个不错的加载动画;）