我想在查询结果中添加一个“显示更多/更少”按钮。问题是我在数据库中有255个条目，但只想显示特定开始/结束日期内的条目。下面的代码为我提供了比较中正确的故事列表（2019年有29条记录），但我想显示前9条，然后单击``更多/更少''按钮以显示其余内容。 （一次9或10个为最佳。）
我尝试使用CF，但我充其量只是平均水平，并且对javascript和JQuery完全不了解。任何帮助将不胜感激。
这是我需要的代码：
<cfquery name="GetNewsArchive" datasource="DATASOURCE">
SELECT ID, ENTRY_TIME, START_DATE, END_DATE, STORY_TYPE,
AUTHOR, TITLE, TEASER, NEWS_STORY_TYPE, NEWS_TOP_STORY,
PICTURE,
NEWS_LINK_URL1, NEWS_LINK_URL2, NEWS_CAPTION, APPROVED, BREAKINGNEWS, SHORT_URL
FROM MAIN
WHERE NEWS_STORY_TYPE = 18
AND APPROVED = 1
ORDER BY START_DATE DESC
</cfquery>
<cfoutput query="GetNewsArchive">
<cfset StoryDate = #GetNewsArchive.entry_time#>
<cfset StoryTime = #GetNewsArchive.entry_time#>
<cfset todaydate = DateFormat(now(),"yyyy-mm-dd")>
<cfset todaytime = TimeFormat(now(),"HH:mm:ss")>
<cfset todaysdate = "#todaydate# #todaytime#">
<cfset startcomparison = datecompare(#GetNewsArchive.start_date#, todaysdate, "h")><!--- either -1 or 0 --->
<cfset endcomparison = datecompare(#GetNewsArchive.end_date#, todaysdate, "h")><!--- gotta be a 1 --->
<cfset Request.NewsArchiveID = GetNewsArchive.ID>
<cfif startcomparison lte 0 and endcomparison lt 1>
<!--- ***** reformats start date to more pleasing format ***** --->
<cfset newstartdate=#dateformat(createodbcdate(GetNewsArchive.start_date), "dddd mmmm dd, yyyy")#>
<cfset newstarttime=#timeformat(createodbctime(GetNewsArchive.start_date), "htt")#>
<!--- ***** reformats end date to more pleasing format ***** --->
<cfset newenddate=#dateformat(createodbcdate(GetNewsArchive.end_date), "m/d")#>
<cfset newendtime=#timeformat(createodbctime(GetNewsArchive.end_date), "htt")#>
<cfif newstartdate contains "#NewsArchivetartDate#">
<div class="row justify-content-center">
<div class="col-12 text-center">
<div class="row justify-content-center grow">
<div class="col-sm-10 col-md-6 col-lg-4 mb-3 text-left">
<a href="/story/#GetNewsArchive.short_url#"><img src="/images_story/#GetNewsArchive.picture#" alt="[#GetNewsArchive.title#]" class="img-fluid"></a>
</div>
<div class="col-sm-10 col-md-6 col-lg-8 text-left">
<a href="/story/#GetNewsArchive.short_url#" class="shortmenu">#GetNewsArchive.title#</a>
<p>
#GetNewsArchive.teaser#
</p>
</div>
</div>
</div>
</div>
<cfelse>
</cfif>
</cfif>
</cfoutput>
我尝试使用用户“ Leigh”发现的这种方法，但是除非在查询中添加“ Top x”，否则它在比较日期上就失效了……这违反了比较的目的。
<cfoutput query="GetNewsArchive">
<cfset StoryDate = #GetNewsArchive.entry_time#>
<cfset StoryTime = #GetNewsArchive.entry_time#>
<cfset todaydate = DateFormat(now(),"yyyy-mm-dd")>
<cfset todaytime = TimeFormat(now(),"HH:mm:ss")>
<cfset todaysdate = "#todaydate# #todaytime#">
<cfset startcomparison = datecompare(#GetNewsArchive.start_date#, todaysdate, "h")><!--- either -1 or 0 --->
<cfset endcomparison = datecompare(#GetNewsArchive.end_date#, todaysdate, "h")><!--- gotta be a 1 --->
<cfset Request.NewsArchiveID = GetNewsArchive.ID>
<cfif startcomparison lte 0 and endcomparison lt 1>
<!--- ***** reformats start date to more pleasing format ***** --->
<cfset newstartdate=#dateformat(createodbcdate(GetNewsArchive.start_date), "dddd mmmm dd, yyyy")#>
<cfset newstarttime=#timeformat(createodbctime(GetNewsArchive.start_date), "htt")#>
<!--- ***** reformats end date to more pleasing format ***** --->
<cfset newenddate=#dateformat(createodbcdate(GetNewsArchive.end_date), "m/d")#>
<cfset newendtime=#timeformat(createodbctime(GetNewsArchive.end_date), "htt")#>
<cfif newstartdate contains "#NewsArchivetartDate#">
<cfset hideAtRow = 9>
<!--- start container for "show more" --->
<cfif GetNewsArchive.currentRow eq hideAtRow >
<div id="collapse-news" class="collapse-inline collapse">
</cfif>
<!--- assign classes based on current row number --->
<cfset btnClass = currentRow gte hideAtRow ? "btn btn-news dropdown-toggle" : "btn">
<div class="row justify-content-center hover_drop_down">
<div class="col-12 text-left">
<div class="row justify-content-center mt-3">
<div class="container col-12">
<div class="row justify-content-center mt-3 grow">
<div class="col-4">
<a href="/story/#GetNewsArchive.short_url#"><img src="/images_story/#GetNewsArchive.picture#" alt="[#GetNewsArchive.title#]" class="img-fluid doubleBorderGreen"></a>
</div>
<div class="col-8">
<div class="row justify-content-center">
<div class="col-12 text-left">
<a href="/story/#GetNewsArchive.short_url#" class="shortmenu">#GetNewsArchive.title#</a>
</div>
</div>
<div class="row">
<div class="col-12 text-left">
#GetNewsArchive.teaser#
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--- on last row, close "show more" container if needed --->
<cfif GetNewsArchive.currentRow eq GetNewsArchive.recordCount and GetNewsArchive.currentRow gte hideAtRow >
</div>
<button id="testButton" class="btn btn-kw-ml MoreLess" data-toggle="collapse" data-target="##collapse-news">More</button>
</cfif>
<cfelse>
</cfif>
</cfif>
</cfoutput>
答案 0 :(得分：1)
您所写的所有内容都表明，您的主要重点是使datecompare函数执行它不适合的功能。这会阻止您实现目标，即：
如果我尝试这样做，我将在查询中使用日期过滤器，并在url范围内传递datetime变量。步骤1是为初始页面加载为该变量建立默认值。
<cfparam name = "url.startdate" default = #now()#>
第2步是使用该变量运行查询
SELECT top 9
ID, ENTRY_TIME, START_DATE, END_DATE, STORY_TYPE,
AUTHOR, TITLE, TEASER, NEWS_STORY_TYPE, NEWS_TOP_STORY,
PICTURE,
NEWS_LINK_URL1, NEWS_LINK_URL2, NEWS_CAPTION, APPROVED, BREAKINGNEWS, SHORT_URL
FROM MAIN
WHERE NEWS_STORY_TYPE = 18
AND APPROVED = 1
and start_date < <cfqueryparam cfsqltype = "cf_sql_timestamp" value = "#url.startdate#">
ORDER BY START_DATE DESC
</cfquery>
第3步是从查询中获取最早的开始日期。
<cfset minStartDate = arraymin(GetNewsArchive['start_date'])>
最后，在您的锚标记中使用该变量。
<a href="ThisPage.cfm?startdate=#minStartDate#">Show More</a>
这为您提供了总体思路。它将需要设置url变量的格式，我将留给您。
答案 1 :(得分：0)
...
class ProductItemWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final product = Provider.of<Product>(context);
return Card(
child: ListTile(
leading: product.image.isEmpty
? Icon(Icons.image)
: Image.asset(product.image),
title: Text(product.name),
subtitle: Text(product.info),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(Icons.edit),
onPressed: () {
Navigator.of(context).pushNamed(
ProductEditScreen.routeName,
);
},
),
],
),
onTap: () {
Navigator.of(context).pushNamed(
ProductDetailScreen.routeName,
);
},
),
);
}
}