我刚刚毕业，所以我没有太多的编程经验。
我正在使用jQuery函数slideToggle()在显示两个div元素之一之间切换。 div都显示数据行，我正在尝试使用分页，因为每个div上有超过50条记录。
到目前为止一切似乎都很好。刷新页面并显示第一个div，分页正常工作。
当我点击运行jQuery函数的按钮切换到另一个div时，问题就出现了。显示第二个div（第一个消失，很好）。当我点击页码时，浏览器会将我重定向到第一个div并开始显示第一个div的结果。 我认为这是正常的，因为在页面刷新浏览器时会运行默认值，但我不知道如何解决这种情况。我将不胜感激任何帮助。忘记提到这是ColdFusion。
到目前为止我所做的是：
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="logic.js"></script>
</head>
<body style="background-color:#E8ECED">
<div id="header">
<h1>BHA Toyota</h1>
</div>
<div class="container">
<cfset pageSize=15/>
<cfset recordCount=100/>
<cfset intStart=1/>
<div style="min-height:40px">
<div id="title">Top 30 Live Outbound Calls</div>
<div id="switchDealershipsButton">
<span id="switchDealers" role="button" tabindex="0">Switch to Showcase Honda</span>
</div>
</div>
<div id="texasHonda" class="row">
<cfparam name="url.pageNumber" type="string" default=""/>
<cfset pageNumber=#url.pageNumber#/>
<cfquery name="texasHondaLiveOutbandCalls" datasource="callmeasurement">
SELECT refname, callid, cf_frn_dnisid, tz_datetime
FROM [dbo].[lskin] AS ls
INNER JOIN [dbo].[dnis] as dn
ON ls.lskinid=dn.add_lskinid
INNER JOIN [dbo].[xcall_long] AS xl
ON dn.dnisdbid=xl.cf_frn_dnisid
WHERE isoutbound=1 AND frn_xcall_dispositionid=1 AND refname='BHA - Texas Toyota'
ORDER BY tz_datetime DESC
OFFSET #pageSize# *(#pageNumber#-1) ROWS
FETCH NEXT #pageSize# ROWS only;
</cfquery>
<cftable query="texasHondaLiveOutbandCalls" htmlTable="true" colHeaders="true">
<cfcol width="30" header="Account Name" text="<em>#texasHondaLiveOutbandCalls.refname#</em>">
<cfcol width="23" header="Call ID" text="<em>#texasHondaLiveOutbandCalls.callid#</em>">
<cfcol width="20" header="Line ID" text="<em>#texasHondaLiveOutbandCalls.cf_frn_dnisid#</em>">
<cfcol width="30" header="Date/Time of Call" text="<em>#texasHondaLiveOutbandCalls.tz_datetime#</em>">
</cftable>
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10 )#">
<!---
Calculate the start value based on the
current page.
--->
<cfset intStart=(1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#">
#intPage#</a>
</cfloop>
</cfoutput>
</div>
<div id="showcaseHonda" class="row" style="display:none">
<cfparam name="url.pageNumber" type="string" default=""/>
<cfset pageNumber=#url.pageNumber#/>
<cfquery name="showcaseHondaLiveOutbandCalls" datasource="callmeasurement">
SELECT refname, callid, cf_frn_dnisid, tz_datetime
FROM [dbo].[lskin] AS ls
INNER JOIN [dbo].[dnis] as dn
ON ls.lskinid=dn.add_lskinid
INNER JOIN [dbo].[xcall_long] AS xl
ON dn.dnisdbid=xl.cf_frn_dnisid
WHERE isoutbound=1 AND frn_xcall_dispositionid=1 AND refname='BHA - Showcase Honda'
ORDER BY tz_datetime DESC
OFFSET #pageSize# *(#pageNumber#-1) ROWS
FETCH NEXT #pageSize# ROWS only;
</cfquery>
<div class="table">
<cfoutput query="showcaseHondaLiveOutbandCalls">
<div class="tableRow">
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.refname#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.callid#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.cf_frn_dnisid#</div>
<div class="tableCell">
#showcaseHondaLiveOutbandCalls.tz_datetime#</div>
</div>
</cfoutput>
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10 )#">
<!---
Calculate the start value based on the
current page.
--->
<cfset intStart=(1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#">
#intPage#</a>
</cfloop>
</cfoutput>
</div>
</div>
</div>
</body>
</html>
$(document).ready(function() {
$('#switchDealers').click(function()
{
var dealerOnScreen = $('#switchDealers').text();
if(dealerOnScreen === "Switch to Showcase Honda")
$('#texasHonda').slideToggle("slow", texasToyota);
else
$('#showcaseHonda').slideToggle("slow", showcaseHonda);
});
function texasToyota() {
$('#showcaseHonda').slideToggle("slow");
$('#switchDealers').text("Switch to Texas Toyota");
}
function showcaseHonda() {
$('#texasHonda').slideToggle("slow");
$('#switchDealers').text("Switch to Showcase Honda");
}
});
答案 0 :(得分：1)
我添加了另一个变量＆＃34; section＆＃34;我在哪里创建第二个div的分页链接（有问题的那个。我检查是否定义了变量部分（这意味着单击了第二个div的分页链接）。如果定义了浏览器获取刷新但是我隐藏了第一个div并显示了第二个div。
<cfoutput>
<cfloop index="intPage" from="1" to="#Ceiling(recordCount / 10)#">
<cfset intStart = (1 + ((intPage - 1) * 10))/>
<!--- Output paginating link. --->
<a href="#CGI.script_name#?pageNumber=#intPage#§ion=2">#intPage#</a>
</cfloop>
</cfoutput>
<cfif isDefined("section") and section EQ 2>
<script type="text/javascript">
$(document).ready(function () {
$('#showcaseHonda').show();
texasToyotaHide();
});
</script>
</cfif>
答案 1 :(得分：1)
（评论太长了......）
顺便说一下，既然你提到了CF的新手，那么关于代码的一些建议和提示
从不在sql中使用原始客户端变量，因为它将数据库公开给sql injection。而是使用cfqueryparam，除了其他好处之外，还可以防止原始参数作为sql命令执行。所以它可以在任何文字预期的地方使用。 （它不能与对象名一起使用）。由于OFFSET / FETCH需要一个简单的数字，因此应该在这里工作。如果没有，则必须首先清除url参数，例如使用val()来确保数值。
尝试并避免使用CF UI标记（cftable，cfcol，cfform等）。大多数都是过时的和马车。更不用说难以定制了。我不得不在文档中查找cftable以了解其功能，但看起来您可以使用简单的html <table>和查询循环替换它。
虽然它可以以任何方式工作，但分离数据库和HTML可以使代码更清晰，更易读。通常的惯例是首先放置查询和参数声明，然后放置任何显示代码。 （您也可以将数据库逻辑移动到cfcomponent。）
<!--- initialize variables --->
<cfparam name="url.pageNumber" default=""/>
<!--- retrieve data --->
<cfquery ...>.. sql statement here</cfquery>
<cfquery ...>.. sql statement here</cfquery>
<!--- presentation code --->
<html>
<head>
... rest of display code ...
</body>
</html>
CFParam创建一个变量（如果它尚不存在）。因此，不需要对同一个变量进行多个cfparam声明。第一个将完成工作，其他人将最终被忽略。
不需要像你想象的那样经常使用英镑标志。 通常只有在<cfoutput>内使用变量或将变量放在引号内时才需要它们。所以使用：
<cfset pageNumber= url.pageNumber/>
而不是：
<cfset pageNumber= #url.pageNumber#/>
虽然在这种特定情况下，不需要将url.pageNumber复制到另一个变量中。只需在代码中直接使用url.pageNumber即可。