Skip to main content
A
Anonymous
May 13, 2011
Answered

Creating Next prev with ajax ?

  • May 13, 2011
  • 1 reply
  • 4372 views

I am planning to create a result page with ajax includign function next / prev for limit the result.

Example.

Showing results 6 - 10 of 15
PREV 1 2 3 NEXT

6 - Alex - Business
7 - Edmond - IT
8 - Alica - Design
9 - Shook - Art

But i only can create it with link to another page. Can some 1 give me some tips on ajax without refresh and can be click on the prev / next ?

some of my code is below

<cfquery datasource="#ds#" name="test">

SELECT *

FROM employee

</cfquery>

<cfset Result_Per_Page="5">

<cfset Total_Records="#test.recordcount#">

<cfparam name="URL.offset" default="0">

<cfset limit=URL.offset+Result_Per_Page>

<cfset start_result=URL.offset+1>

<cfoutput>

Showing results #start_result# -

<cfif limit GT Total_Records>

#Total_Records#

<cfelse>

#limit#

</cfif>

of #Total_Records#

</cfoutput>

<cfset URL.offset=URL.offset+1>

<cfif Total_Records GT Result_Per_Page>

<br>

<cfif URL.offset GT Result_Per_Page>

<cfset prev_link=URL.offset-Result_Per_Page-1>

<cfoutput><a href="#cgi.script_name#?offset=#prev_link#">PREV</a>

<br />

</cfoutput>

</cfif>

<cfset Total_Pages=ceiling(Total_Records/Result_Per_Page)>

<cfloop index="i" from="1" to="#Total_Pages#">

<cfset j=i-1>

<cfset offsetvalue=j*Result_Per_Page>

<cfif offset_value EQ URL.offset-1 >

<cfoutput>#i#</cfoutput>

<cfelse>

<cfoutput><a href="#cgi.script_name#?offset=#offset_value#">#i#</a></cfoutput>

</cfif>

</cfloop>

<cfif limit LT Total_Records>

<cfset next_link=URL.offset+Result_Per_Page-1>

<cfoutput><a href="#cgi.script_name#?offset=#next_link#">NEXT</a>

<p></p>

</cfoutput>

</cfif>

</cfif>

<cfloop query="test" startrow="#URL.offset#" endrow="#limit#">

<cfoutput>#ID# - #name# - #dept#</cfoutput> <br>

</cfloop> 

    This topic has been closed for replies.
    Correct answer talofer99

    Thank for your helpful example. 1 question here.

    If i wanna set my result . for example.

    I have 50 result , i wanna set each page only show  5 result, is it posible with the example you show me ?


    try this code, notice it should be saved in 2 files: index.cfm and output.cfm... I didn;t test it ... but it should work ....

    <!--- ***************************************************** --->
    <!--- SAVE THIS AS INDEX.CFM FILE --->
    <!--- ***************************************************** --->

    <cfquery datasource="#ds#" name="test">
    SELECT *
    FROM employee
    </cfquery>

    <!--- calc total pages  --->
    <cfset _totalperpage = 5>
    <cfset _totalpages = ceiling(test.recordcount/_totalperpage)>


    <!--- This control th paging ajax action --->
    <script type="text/javascript">
    // global var
    var currentPage = 1;

    // paging
    function pagingbyid(pageid)
    {
    // navigate to index.cfm with url param pageid with the value sent to the function
    ColdFusion.navigate('output.cfm?pageid='+pageid ,'ContentOutputDiv');
    currentPage = pageid;
    }
    <cfoutput>
    // next
    function next()
    {
    if (currentPage < #_totalpages#)
    {
      currentPage +=1;
      pagingbyid(currentPage);
    }
    // end next
    }

    // prev
    function prev()
    {
    if (currentPage > 1)
    {
      currentPage -=1;
      pagingbyid(currentPage);
    }
    //edn prev
    }
    </cfoutput>
    </script>

    <!--- paging --->
    <a href="javascript:void(0)" onclick="prev()">prev</a> |
    <cfloop from="1" to="#_totalpages#" index="pageid">
    <cfoutput><a href="javascript:void(0)" onclick="pagingbyid(#pageid#)">#pageid#</a> |</cfoutput>
    </cfloop>
    <a href="javascript:void(0)" onclick="next()">next</a> |


    <!--- This is the output div --->
    <div id="ContentOutputDiv">Output will show here</div>


    <!--- ***************************************************** --->
    <!--- ***************************************************** --->


    <!--- ***************************************************** --->
    <!--- SAVE THIS IS OUTPUT.CFM FILE --->
    <!--- ***************************************************** --->

    <cfparam name="url.pageid" default="1">

    <cfquery datasource="#ds#" name="test">
    SELECT *
    FROM employee
    </cfquery>

    <cfset _totalperpage = 5>
    <cfset _startrow = (url.pageid-1) * totalperpage + 1>
    <cfset _endrow = _startrow + _totalperpage - 1>

    <cfloop query="test" startrow="#_startrow#" endrow="#_endrow#">

    <cfoutput>#ID# - #name# - #dept#</cfoutput> <br>

    </cfloop> 
    <!--- ***************************************************** --->
    <!--- ***************************************************** --->

    1 reply

    talofer99
    talofer99
    Inspiring
    May 14, 2011

    You need to start by separate the "paging" section from the "content output" section, and have the paging section static and the content dynamic (reload via Ajax).

    You achieve this in many ways:

    Use CFDIV and bind function to a hidden form object, and when one of the numbers is clicked, a JS function will update the form, trigging a reload on the output.

    More info on binding:

    http://help.adobe.com/en_US/ColdFusion/9.0/Developing/WSc3ff6d0ea77859461172e0811cbec22c24-7a0a.html

    Use CFDIV when the paging numbers when clicked activate a JS function that updates the content of the DIV using the JS "ColdFusion.navigate" – more info

    http://livedocs.adobe.com/coldfusion/8/htmldocs/JavaScriptFcns_24.html

    or you can use the really powerful cfgrid that offers paging as part of its features

    http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_g-h_03.html

    I'm sure other people have many other ways to go about it, try them out and see what works best for you.

    Remember that pages that are loaded via AJAX can not contain javascript blocks, if you need to have a function to work from the called cf page, place it on the paging section page.

    Hope this will help you get started

    A
    Anonymous
    May 14, 2011

    talofer99 is you ! Thank again !

    Erm... actually my result will come out with table including with content and image.

    Which method do u recommend ?

    cfgrid only can work in list form ? Sorry, what i have try with cfgrid only can work in list form, if i am mistake please correct me.

    talofer99
    talofer99
    Inspiring
    May 14, 2011

    Here is an example of using coldfusion.navigate

    Save the code in a file name index.cfm and run it on the server ....

    You can seperate the PAGING output file from the CONTENT output file, and in the JS call the file with the contenet in it. for this example I used the same file ..

    Hope this will send you on the way to buield your version of it

    <!--- This is done for th output of page called by the AJAX --->
    <!--- This can be a diffrent file with the Query and the output --->
    <cfif isdefined('url.pageid')>
    <cfoutput>PAGE SENT AJAX - #url.pageid#</cfoutput>
    <cfabort>
    </cfif>

    <!--- cfajaximport - needed for the colfusion. JS object to exists --->
    <cfajaximport>

    <!--- This control th paging ajax action --->
    <script type="text/javascript">

    function pagingbyid(pageid)
    {
    // navigate to index.cfm with url param pageid with the value sent to the function
    ColdFusion.navigate('index.cfm?pageid='+pageid ,'ContentOutputDiv');
    }

    </script>

    <!--- Page 1-4 sample --->
    PAGING:
    <a href="javascript:void(0)" onclick="pagingbyid(1)">1</a>
    <a href="javascript:void(0)" onclick="pagingbyid(2)">2</a>
    <a href="javascript:void(0)" onclick="pagingbyid(3)">3</a>
    <a href="javascript:void(0)" onclick="pagingbyid(4)">4</a>


    <BR /><BR />

    <!--- This is the output div --->
    <div id="ContentOutputDiv">Output will show here</div>

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices