Start Building Professional
Web Apps Today


 
Categories Question details Back To List
Question  posted by shaffi baig on May 19, 2009 23:46
open dhtmlx forum
Hi how to display 5,10,15 records per page in grid in html table

Hi,

Can u please tell me how to display 5 records,10 records...etc based on selection..here is my code....in which i had written callrecordspage(this) method...i can able to clear the tabel..but i don't know how to reload the table....help needed urgent...i very thankful for ur previous help and guidance...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<link rel="STYLESHEET" type="text/css" href="dhtmlxgrid.css">
<link rel="STYLESHEET" type="text/css" href="dhtmlxtoolbar.css">

<script src="dhtmlxcommon.js"></script>
<script src="dhtmlxgrid0.js"></script>
<script src="dhtmlxgridcell.js"></script>
<script src="dhtmlxprotobar.js"></script>
<script src="dhtmlxtoolbar.js"></script>
<script src="dhtmlxgrid_pgn.js"></script>    
<script src="dhtmlxgrid_filter.js"></script>
<script src="dhtmlxgrid_start.js"></script>

<style>
html {
    scrollbar-face-color: #DFDFDF;
    scrollbar-shadow-color: #ffffff;
    scrollbar-highlight-color: #ffffff;
    scrollbar-3dlight-color: #DFDFDF;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-track-color: #ffffff;
    scrollbar-arrow-color: #113c7f;
}
.bodyCopy {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #585858;
    line-height: 15px;
}
    div.gridbox .xhdr{
        background-color:white;
        font:black;
    }
    div.gridbox table.hdr{
    
        background-color:white;
        color:black;
    }
    div.gridbox div.ftr td{
        text-align:right;
                        
    }
    div.gridbox table.hdr td {
    
         background-image:url('codebase/imgs/gridtitlebng.png');
color:black;

    }
    .footertable {
    border-bottom: #505050 1px solid;
    border-left: #505050 1px solid;
    border-right: #505050 1px solid;
    font-size: 11px;
    height: 28px;
    width: 100%;
    font-size: 11px;
}
    </style>
    <style type="text/css">

    .scroll {
    width: 50%;
    overflow: auto;
    padding: 0px;
    height: 170px;
    border: 1px solid #505050
}
</style>

<script type="text/javascript">

var d;
var d1;
function call1()
{
alert("call1"+d);
if("undefined".match(d))
{
alert("inasdfa");
}
else
{
alert("ddddddddddddddddddd"+d);
alert("fffffffffffff"+d1);

        document.getElementById(d).style.display='none';
        document.getElementById(d1).style.display='';
}



}
function call(c)
{
d1=c.value;
d=d1+"1";
alert("call "+d);
alert(" ddd "+d1);
document.getElementById(d1).style.display='none';
document.getElementById(d).style.display='';
}
function waitmsg()
{
//alert("wait mesg");
document.getElementById("wait").style.display='';

}
function waitmsg1()
{
document.getElementById("wait").style.display='none';

}
</script>
</head>
<body ONLOAD="k()">
<select onchange="mygrid.setSkin(this.value)">
        <option value="sbdark" selected>sb dark
        <option value="gray">gray
        <option value="mt">mt
        <option value="xp">xp
        <option value="clear">clear
        <option value="modern">modern
        <option value="light" selected>light
    </select>
<fieldset style="width:600px">
    <legend>Filter</legend>
    Column
<select id='a10'>
    <option value='0'>0</option><option value='1'>1</option><option value='2'>2</option>
    </select>
Mask
<input type="text" name="a12" value="" id="a12">
<input type="button" name="a11" value="Filter" id="a11" onclick='mygrid.filterBy(document.getElementById("a10").value,document.getElementById("a12").value);'>

</fieldset>

<div id="wait" ><img src="codebase/imgs/loading.gif"/></div>
<table width="100%" border=0>
<tr valign="bottom" align="right" height="5px"><td ><div id="pagingArea" ></div> <div id="recinfoArea" ></div></td></tr>
             <tr>
                 <td width="150%" >
<table class="dhtmlxGrid" id="some_table" imgpath="imgs/" gridHeight="150" onbeforeinit="waitmsg()" lightnavigation="true" oninit="">
<tr class="bodyCopy" >
<td sort="str" width="100%">Change Id</td><td type="ro" width="100%">Type</td><td width="150%">Short Description</td> <td sort="str" width="100%">Stake Holders</td><td type="co" width="150%">Linked to Requirement</td><td width="100%">Date Submitted</td> <td sort="str" width="100%">Submitted By</td><td type="co" width="200%">Customer</td><td width="200%">Priority</td>
        
</tr>
<tr class="bodyCopy" attr1="hi" attr2="shaffi">
<td>sssddddddddddddddddddddddddddddddddddddddddddddddddddddd</td><td align="center"><div id="ddd" style="display:table-cell"><input type="radio" value="ddd" style="width:12px" onclick="call1();call(this)"/></div><div id="ddd1" style="display:none"><img src='codebase/imgs/radio_chk1.gif' width="12px" align="center" onclick="call1()"/></div></td><td>33</td><td>sss</td><td>dddd</td><td>33</td>
        <td>sss</td><td>dddd</td><td>33</td>
        </tr>
     <tr class="bodyCopy" attr1="hi" attr2="shaffi">
<td>sss</td><td align="center"><div id="dd" style="display:table-cell"><input type="radio" value="dd" style="width:12px" onclick="call1();call(this)"/></div><div id="dd1" style="display:none"><img src='codebase/imgs/radio_chk1.gif' width="12px" align="center" onclick="call1()"/></div></td><td>33</td><td>sss</td><td>dddd</td><td>33</td>
        <td>sss</td><td>dddd</td><td>33</td>
        </tr>
        

    

</table>
<table class="footertable" >
    
    <tr bgcolor="" height='2px'>
     <td class='bodyCopy' colspan="6">
     <a href="#" onclick="changeInfo()">Change Request Info</a>     
         <a href="#" onclick="EvalutaionTab()">Evaluation Tab</a>     
         <a href="#" >Implementation Tab </a>     
         <a href="#" >Documentation Tab </a>     
         <a href="#" onclick="ImplTab()">Attributes</a>
        </tr>
    </table>
</td></tr></table>
    

Records Per Page<select id='a10' onchange="callrecordspage(this)">
    <option value='5'>5</option><option value='10'>10</option><option value='15'>15</option>
    </select>
<script>
var mygrid = dhtmlXGridFromTable("some_table");

    mygrid.setImagePath("codebase/imgs/");

mygrid.setInitWidths("50,150,120,80,80,80,80,200,200");
mygrid.setColAlign("left,right,right");
// mygrid.setHeader("A,B,C",null,["background-image: codebase/imgs/true.gif","text-align:left;","text-align:center"]);
mygrid.enablePaging(true,5,1,"pagingArea",true,"pagingArea");
mygrid.attachHeader("#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter");
         mygrid.hdr.rows[2].style.display="none";    
            //mygrid.setPagingTemplates("[ first:first ][prevpages:PREVIOUS:] [current:0] [nextpages:NEXT>>:][ last:last ]","")

    

mygrid.attachEvent("onCheckbox",function(stage,id,index)
{ /*this event wil be called when cell is edited (radio is clicked)*/
alert("idd "+ id);
alert("index"+index);
alert("check");
alert("stage "+stage);
    if(stage==1) some(mygrid.getAttribute("attr1"),mygrid.getAttribute("attr2"));

    return true

});

mygrid._pgn_custom=function(page,start,end){
/* page - the current page
start - the first visible row
last - the last visible row */
var html='<img src="codebase/imgs/ar_left.gif"/><span>Current page: '+page+'</span><img src="codebase/imgs/ar_right.gif"/>';
mygrid._pgn_parentObj.innerHTML=html;
mygrid._pgn_parentObj.childNodes[0].onclick=function() { // the previous button logic
mygrid.changePageRelative(-1);
}
mygrid._pgn_parentObj.childNodes[2].onclick=function() { // the next button logic
mygrid.changePageRelative(1);
}
}
//mygrid.setPagingSkin("custom");

mygrid.attachEvent("onRowSelect",doOnRowSelected);

mygrid.setSkin("light");
    //mygrid.load(js,"xml");
    //mygrid.loadXMLString(js);
    function some(a,b)
{
alert("aa "+a);
}
function doOnRowSelected(rowID,celInd){

// alert("Selected row ID is "+rowID+"\nUser clicked cell with index "+celInd);
}

function k()
{

    mygrid.changePage(0);
}
var count=0;
function filterclick()
{

mygrid.changePage(0);
mygrid.hdr.rows[2].style.display="";
    if(count==0)
    {
    count++;
     filterclick();
     }
    //         mygrid.attachHeader("#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter,#text_filter");

}
function hidefilter()
{
alert(mygrid.hdr.rows[2].style.display);
mygrid.hdr.rows[2].style.display="none";
     mygrid.changePage(0);
     count=0;
}

function callrecordspage(elemt)
{
    var sel=elemt.options[elemt.selectedIndex].value;
    alert("selct vlue "+sel);

mygrid.clearAll();
    mygrid.enablePaging(true,sel,3,"pagingArea",true,"recinfoArea");
//mygrid.loadXML("/grid.xml");
// mygrid.parse(restextvalue);
}

</script>





</BODY>
</HTML>
Answer posted by Support on May 20, 2009 03:59
You can use code similar to next

function callrecordspage(elemt) 
{ 
  var sel=elemt.options[elemt.selectedIndex].value; 
  alert("selct vlue "+sel); 

mygrid.rowsBufferOutSize=sel; //set new size of page
mygrid.changePage(); //force view update
}