EasyUI Forum
May 14, 2024, 01:29:07 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: add custom-button to pagination-bar?  (Read 13662 times)
digo
Newbie
*
Posts: 26


View Profile
« on: July 22, 2013, 01:21:52 AM »

Hi!

I would like to add some text and a button after the refresh-button in the pagination-bar.
Is this possible?

Thank!

Digo
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #1 on: July 22, 2013, 07:04:54 PM »

You are allowed to append the existing element to pagination bar. Before using this feature please download the updated pagination plugin from http://www.jeasyui.com/easyui/plugins/jquery.pagination.js and include it to your page.
Code:
<div class="easyui-pagination" data-options="total:114,buttons:'#bb'" style="border:1px solid #ddd;"></div>
<div id="#bb">
  <span>Your Label</span>
  <a href="#" class="easyui-linkbutton" ...>Your Button</a>
</div>
Logged
digo
Newbie
*
Posts: 26


View Profile
« Reply #2 on: July 24, 2013, 01:14:02 AM »

Hi!

Thanks for your reply!

I added http://www.jeasyui.com/easyui/plugins/jquery.pagination.js and the easyui-pagination-div, but there is no change within the pagination-bar. By using Firebug I can see, that there is an invisible additional pagination-bar blow the grid.

Any suggestions?

Thanks!
Digo

Code:
<div class="easyui-layout" fit="true">
<div region="north" split="true" border="false" style="height:340px">
      <table id="dg"
url="ajax_GetList.php?TicketTyp=<?php echo($TicketTyp); ?>" border="false"
fit="true" fitColumns="true" singleSelect="true"

loadmsg="Daten werden geladen..."
pagination="true" pageSize="10" pageList="[5,10,20,30,40,50,100]"
toolbar="#tb_dg" >
<thead>
<tr>
   <th data-options="field:'itemid', sortable:false" width="25">ID</th>
   <th data-options="field:'ProduktBez', hidden:false" width="150">Produkt</th>
<th data-options="field:'Subject', sortable:true" width="300">Thema</th>
<th field="InfoIcons" width="60">Info</th>
<th field="ErstellDatumOut" width="60">Datum</th>
<th field="User" width="65">Erfasser</th>
         <th field="statusBez" width="100" align="center" formatter="formatStatusUser">Status</th>
</tr>
</thead>
</table>

<div class="easyui-pagination" data-options="total:114,buttons:'#digobb'" style="border:1px solid #ddd;">xxxxxxxxx</div>
<div id="digobb">
  <span>Your Label</span>
</div>

<div id="tb_dg" style="padding:5px;height:auto">
   <div style="margin-bottom:5px">
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #3 on: July 24, 2013, 06:55:46 AM »

The code below works well. Please refer to this example http://jsfiddle.net/GTUCZ/
Code:
<div class="easyui-pagination" data-options="buttons:'#bb'" style="width:800px;border:1px solid #ccc"></div>
<div id="bb">
    <span>Your Label</span>
</div>
Logged
digo
Newbie
*
Posts: 26


View Profile
« Reply #4 on: July 24, 2013, 07:29:13 AM »

Thanks.

Yes, the code works well, but I expected another output ;-)

I donĀ“t want to add a new pagination-bar - I would like to add some text/some buttons to an existing pagination-bar of a datagrid.

In this example: http://jsfiddle.net/H7QDt/ I get 2 pagination-bars - but I would like to see "Your Label" in the first (grey background) pagination-bar.

Any suggestions?

Thanks!
Digo
Logged
stworthy
Administrator
Hero Member
*****
Posts: 3581


View Profile Email
« Reply #5 on: July 24, 2013, 08:15:37 AM »

Please refer to this updated example http://jsfiddle.net/H7QDt/1/.
Logged
digo
Newbie
*
Posts: 26


View Profile
« Reply #6 on: July 25, 2013, 05:46:08 AM »

Thanks for your support!

It works fine!

Ciao
Digo
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!