如何在两个 div 元素上使用分页，其中一次只有一个可见

Question

刚毕业，编程经验不多。我正在使用 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"); 
     }
  
  });

Answer 1

好的伙计们，我能够解决问题。如果以后有人遇到这个问题，我会在这里发布答案。

我添加了另一个名为 "section" 的变量，我在其中为第二个 div（出现问题的那个）创建分页 link。我检查变量部分是否是已定义（这意味着单击第二个 div 的分页 link）。如果已定义，浏览器会刷新，但我隐藏第一个 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>

Answer 2

（评论太长了...）

顺便说一句，既然您提到自己是 CF 的新手，关于代码的一些建议和技巧

从不在sql中使用原始客户端变量，因为它将数据库暴露给sql injection. Instead use cfqueryparam, which among other benefits, prevents raw parameters from being executed as sql commands. So it can be used anywhere a literal is expected. (It cannot be used with object names). Since OFFSET / FETCH expects a simple number, it should work here. If not, you will have to scrub the url parameters first, such as using 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 即可。

如何在两个 div 元素上使用分页，其中一次只有一个可见

How can I use pagination on two div elements where only one is visible at a time

html

coldfusion

pagination

coldfusion-9