2017-03-09 46 views
2

我剛畢業就沒有太多的編程經驗。 我正在使用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

+0

你可以發佈JS代碼顯示你如何使用'slideToggle()'? – Leigh

+0

我對可見代碼進行了快速瀏覽。爲什麼你的默認頁碼是一個空字符串而不是1? –

+0

沒有很好的理由,只是運氣的經驗哈哈。這是第一次加載頁面時失敗,因爲它是未定義的,所以我添加了一個空字符串,但更有意義的是1,而不是「」。 – DoArNa

回答

1

好球員,我能夠解決的問題。如果稍後有人遇到此問題,我將在此發佈答案。

我添加了另一個名爲「section」的變量,我在其中爲第二個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#&section=2">#intPage#</a> 

    </cfloop> 
</cfoutput> 



<cfif isDefined("section") and section EQ 2> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('#showcaseHonda').show(); 
       texasToyotaHide(); 
      }); 
     </script> 
</cfif> 
+0

幹得不錯。也可能考慮給予div的序列號,即「經銷商1」和「經銷商2」。然後你可以做一些更像這樣的動態:https://jsfiddle.net/8tegj7da/8/ – Leigh

1

(太長評論...)

順便說一句,既然你提到是CF新手,關於代碼的一些建議和提示

  1. 從不在sql中使用原始客戶端變量,因爲它將數據庫公開到sql injection。相反,使用cfqueryparam(除其他優點外)可防止原始參數作爲sql命令執行。所以它可以在任何需要文字的地方使用。 (它不能與對象名稱一起使用)。由於OFFSET/FETCH期望一個簡單的數字,它應該在這裏工作。如果沒有,你必須首先清理url參數,例如使用val()來確保一個數字值。

  2. 嘗試並避免使用CF UI標籤(cftable,cfcol,cfform等)。大多數是過時的和越野車。更不用說難以定製。我不得不在文檔中查找cftable以瞭解它的功能,但是看起來您可以用普通的html <table>和查詢循環替換它。

  3. 儘管它可以以任何方式工作,但分離數據庫和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> 
    
  4. CFParam創建一個變量,如果它不存在。所以不需要對同一個變量進行多個cfparam聲明。第一個將完成工作,其他人將最終被忽略。

  5. 磅標記不需要像你想象的那麼頻繁。 通常只有在<cfoutput>內部使用變量或將變量放在引號內時,才需要它們。因此,使用:

    <cfset pageNumber= url.pageNumber/> 
    

    代替:

    <cfset pageNumber= #url.pageNumber#/> 
    

    雖然在這個特定的情況下,沒有必要url.pageNumber複製到另一個變量。只需在代碼中直接使用url.pageNumber即可。

相關問題