How to work on Pager.. urjent

[Former Member]

Hai friends,

I have a page where it displays all products by material number, now i need to limit results 10 per page, and i already kept pager toolbar.but how to write code when i click increment button(suppose 2 of 100) i need to display next 10 values in my page, does anybody worked on this.if so plz send some sample code

Thnks in advance

leoiz

[Former Member · Accepted solution]

Mr Thomas,

i am new to bsp and don't have an idea about MVC, if u have time can u plz explain in simple format..

[thomas_jung · Accepted solution]

If you wanted to do the same event code in a regular page, you would put the following code in the OnInputProcessing Event Handler. Also instead of your vindex_bypage variable being an attribute of your model class, just make it a page attribute.

class cl_htmlb_manager definition load.
data: pager type ref to cl_xhtmlb_pager.

pager ?= cl_htmlb_manager=>get_data( request = request
                                     name    = 'xhtmlb:pager'
                                     id      = 'ml_pg1' ).
if pager is not initial.
   vindex_bypage = pager->vindex.
endif.

[Former Member · Accepted solution]

Hai thomas,

At last i got values in pager, i have internal table that contains 120 rows and now i am limiting 10 rows in table and my pager showing correctly as 1 of 12 pages.

but now i got strucked, how can i show next 10 entries when i click on down arrow button,

here i am sending my code.

<%@page language="abap"%>

<%@ extension name="htmlb" prefix="innu"%>

<%@extension name="xhtmlb" prefix="xhtmlb" %>

<innu:content>

<innu:page>

<innu:form>

<%

data vmax type i.

data remander type i.

vmax = lines( gt_vbap ) / 10.

remander = lines( gt_vbap ) mod 10.

if remander ne 0 and remander < 5.

vmax = vmax + 1.

endif.

%>

<xhtmlb:toolbar id="tbpg0" >

<xhtmlb:toolbarItem>

<xhtmlb:pager id = "ml_pg1"

text = "Page [$vIndex$] of $vMax$"

onPage = "pager_onPage"

vMax = "<%= vmax %>"

design = "VERTICAL_SIMPLE+INDICATOR" />

</xhtmlb:toolbarItem>

</xhtmlb:toolbar>

<innu:tableView id = "tbl"

headerText = "Sales Order Details"

headerVisible = "true"

visibleRowCount = "20"

fillUpEmptyRows = "true"

onHeaderClick = "MyEventHeaderClick"

onRowSelection = "MyEventRowSelection"

selectionMode = "MULTILINEEDIT"

keyColumn = "guid"

table = "<%= gt_vbap %>"

keepSelectedRow = "TRUE"

focus1stSelectedCell = " "

columnWrapping="TRUE"

>

<innu:tableViewColumns>

<innu:tableViewColumn columnName="VBELN"

fixedColumn="TRUE">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="POSNR">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="MATNR"

edit="TRUE">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="MATWA"

>

</innu:tableViewColumn>

<innu:tableViewColumn columnName="PMATN">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="CHARG">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="MATKL">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="ARKTX">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="PSTYV">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="POSAR">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="LFREL">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="FKREL">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="UEPOS">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="GRPOS">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="ABGRU">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="PRODH">

</innu:tableViewColumn>

<innu:tableViewColumn columnName="ZWERT">

</innu:tableViewColumn>

</innu:tableViewColumns>

</innu:tableView>

</innu:form>

</innu:page>

</innu:content>

onInputProcessing:

data: pager type ref to cl_xhtmlb_pager.

data: tablev type ref to cl_htmlb_TableView.

tablev ?= CL_HTMLB_MANAGER=>GET_DATA( request = runtime->server->request

name = 'innu:tableView'

id = 'tbl'

).

pager ?= cl_htmlb_manager=>get_data( request = request

name = 'xhtmlb:pager'

id = 'ml_pg1' ).

if pager is not initial.

vindex_bypage = pager->vindex.

endif.

hope i am not disturbing you as i am not gem in oops concept. plz send code to handle button event(when i click on my button that should show other 10 entries in same page

[Former Member · Accepted solution]

Curious? Are you using the pager to show the rows of your table? If so why not just use the tableView features itself?

[thomas_jung · Accepted solution]

Well you have all the event logic that you need. That is what the code in your onInputProcessing is doing. You just now need to tell you tableView about the new starting row that you get from the pager. You are missing the following attribute from my example:

visibleFirstRow = "<%= model->VINDEX_bypage * 6 - 5 %>"

Take the vindex_bypage you are calculating and add the same parameter (visibleFirstRow) to your tableView.

[thomas_jung · Accepted solution]

I can tell you why I usually do that. I find that the pager is easier for the user to work with. The tableView puts its navigation controls in the footer. With the tableView plus pager control, I decided the location. That way I put the pager at the top of my tableView and hide the tableView footer all together. My users seem to like the navigation at the top, especially if they might have to scroll the window to see the bottom of the tableView.

There is a nice example in BSP application SBSPEXT_XHTMLB - page pagerX.bsp.

[Former Member · Accepted solution]

That makes, sense hadn't thought about like that - thanks for the insight Thomas.

[Former Member · Accepted solution]

Hai Thomas,

U r excellent, i got it.. its seems tobe simple but i spent hours to get results.at last i got by ur logic.And what u explained to Craig is correct if u use pager u can jump to perticular page just by entering page number and pressing enter.

now my problem solved.. and ur eligible to get points from my side... Thnks

[thomas_jung]

I do this with the following code:

The following code is in the View. In this example I am showing 6 records per page.

[code]

<xhtmlb:toolbar id="tb_results" >

<xhtmlb:toolbarItem placement="LEFT" >

<htmlb:textView design="HEADER2" >

<otr>Search Results Table</otr>

</htmlb:textView>

</xhtmlb:toolbarItem>

<xhtmlb:toolbarItem placement="RIGHT" >

<%

data vmax type i.

data remander type i.

vmax = lines( model->code3_list ) / 6.

remander = lines( model->code3_list ) mod 6.

if remander ne 0 and remander < 3.

vmax = vmax + 1.

endif.

%>

<xhtmlb:pager id = "ml_pg1"

text = "Page [$vIndex$] of $vMax$"

onPage = "pager_onPage"

vMax = "<%= vmax %>"

design = "VERTICAL_SIMPLE+INDICATOR" />

</xhtmlb:toolbarItem>

</xhtmlb:toolbar>

<xhtmlb:overflowContainer mode = "SCROLL"

height = "175px" >

<htmlb:tableView id = "mq_code3_0060_docs"

design = "ALTERNATING"

selectionMode = "LINEEDIT"

footerVisible = "false"

filter = "SERVER"

sort = "SERVER"

fillUpEmptyRows = "TRUE"

visibleFirstRow = "<%= model->VINDEX_bypage * 6 - 5 %>"

table = "//model/code3_list"

visibleRowCount = "6" />

</xhtmlb:overflowContainer>

[/code]

This is the code in the event handler (I use MVC - DO_HANDLE_EVENT). This traps the paper event and resets the index.

[code]

data: event_id type string.

event_id = event.

if htmlb_event is not initial.

event_id = htmlb_event->id.

endif.

data: model type ref to zcl_bsp_m_mfglbl.

data: appl type ref to zcl_ep_bsp_appl_mfglbl_prt.

****Get a Pointer to the application Object

appl ?= application.

****Get a pointer to the Model Object.

model ?= appl->model.

****The pager control has been pressed (Up or Down ?) - Get the new pager Index

if event = 'ml_pg1'.

data: pager type ref to cl_xhtmlb_pager.

pager ?= htmlb_event_ex.

if model is not initial.

model->vindex_bypage = pager->vindex.

endif.

endif.

[/code]