如何在一次只有一个可见的两个 div 元素上使用分页答案

【问题标题】：How can I use pagination on two div elements where only one is visible at a time如何在一次只有一个可见的两个 div 元素上使用分页
【发布时间】：2017-03-12 11:42:51
【问题描述】：

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

【问题讨论】：

你能贴出JS代码来展示你是如何使用slideToggle()的吗？
我快速浏览了可见代码。为什么你的默认页码是空字符串而不是 1？
没有什么好的理由，只是运气好，哈哈。第一次加载页面时它失败了，因为它是未定义的，所以我添加了一个空字符串，但更有意义的是 1 而不是“”。

标签： html coldfusion pagination coldfusion-9

【解决方案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>

【讨论】：

干得好。也可以考虑给出 div 的顺序 ID，即“dealership1”和“dealership2”。然后你可以像这样做一些更动态的事情：jsfiddle.net/8tegj7da/8

【解决方案2】：

（对于 cmets 来说太长了...）

顺便说一句，既然你提到了对 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。

【讨论】：