我剛畢業就沒有太多的編程經驗。 我正在使用jQuery函數slideToggle()
來切換顯示兩個div元素之一。這兩個div的顯示行數據,我試圖使用分頁,因爲每個div上有超過50個記錄。 目前爲止,一切似乎都很好。刷新頁面,第一個div可見,分頁正常工作。如何在兩個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() {
\t \t $('#switchDealers').click(function()
\t \t {
\t \t \t \t var dealerOnScreen = $('#switchDealers').text();
\t \t \t \t
\t \t \t \t if(dealerOnScreen === "Switch to Showcase Honda")
\t \t \t \t
\t \t \t \t $('#texasHonda').slideToggle("slow", texasToyota);
\t \t \t \t else
\t \t \t \t
\t \t \t \t \t $('#showcaseHonda').slideToggle("slow", showcaseHonda);
\t \t \t \t
\t \t \t });
\t \t \t
\t \t function texasToyota() {
\t \t \t \t \t $('#showcaseHonda').slideToggle("slow");
\t \t \t \t \t $('#switchDealers').text("Switch to Texas Toyota");
\t \t \t \t }
\t \t \t \t
\t \t \t \t
\t \t function showcaseHonda() {
\t \t \t \t \t \t $('#texasHonda').slideToggle("slow");
\t \t \t \t \t \t $('#switchDealers').text("Switch to Showcase Honda");
\t \t \t \t \t }
\t \t
\t \t });
\t \t
你可以發佈JS代碼顯示你如何使用'slideToggle()'? – Leigh
我對可見代碼進行了快速瀏覽。爲什麼你的默認頁碼是一個空字符串而不是1? –
沒有很好的理由,只是運氣的經驗哈哈。這是第一次加載頁面時失敗,因爲它是未定義的,所以我添加了一個空字符串,但更有意義的是1,而不是「」。 – DoArNa