7352

jqgird: problems paging from an existing table

Question:

I had started another <a href="https://stackoverflow.com/questions/3501983/jqgrid-enable-paging-while-converting-html-table-to-grid" rel="nofollow">post</a> wanting to know how to use jqgrid when you are converting a html table to grid. I've got that working. However the data is not paged. It converts table to grid, displays the pager controls and all; however it shows page 1 of 0. The data is paged only when I select a different page size from the drop-down.

Why is the data not paged? Do I need to call anything else to make this happen?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head><title> jqGrid Actual Demo </title><link type="text/css" rel="Stylesheet" href="jquery-ui-1.8.4.custom/css/custom-theme/jquery-ui-1.8.4.custom.css" /><link type="text/css" rel="Stylesheet" href="jquery.jqGrid-3.7.2/css/ui.jqgrid.css" /> <script src="jquery.jqGrid-3.7.2/js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="jquery.jqGrid-3.7.2/js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="jquery.jqGrid-3.7.2/js/jquery.jqGrid.min.js" type="text/jscript"></script> <script type="text/javascript"> $(function() { tableToGrid('#GridView1', { datatype: 'local', rowNum: 10, pager: '#pager', rowList: [10, 20, 30] }); }); </script> </head> <body> <form name="form1" method="post" action="Default2.aspx" id="form1"> <div> <div> <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;"> <tr> <th scope="col">EmployerID</th><th scope="col">EmployeeID</th><th scope="col">Lastname</th><th scope="col">FirstName</th><th scope="col">Addr1</th><th scope="col">Addr2</th><th scope="col">City</th><th scope="col">State</th><th scope="col">Zip</th><th scope="col">Country</th> </tr><tr> <td>285</td><td> 519828</td><td>TURTZ </td><td>JAIME DEE </td><td>1249 NEVADA SKY ST </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89101 </td><td>US </td> </tr><tr> <td>710</td><td> 00862</td><td>LOPEZ </td><td>JOSE </td><td>2752 E. TROPICANA </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89120 </td><td>USA</td> </tr><tr> <td>710</td><td> 00832</td><td>BLUE </td><td>JOSE </td><td>3924 AQUARMARINE WAY #81 </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89103 </td><td>USA</td> </tr><tr> <td>710</td><td> 00101</td><td>PECK </td><td>MARICELA </td><td>2601 GRAND CANYON DR #2037 </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89117 </td><td>USA</td> </tr><tr> <td>710</td><td> 00855</td><td>GONZALEZ </td><td>FLOYD </td><td>1500 STARDUST RD #3082 </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89109 </td><td>USA</td> </tr><tr> <td>875</td><td> 27599</td><td>ESCAMILLA </td><td>FRANCISCO </td><td>6689 CHURNET VALLEY </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89139 </td><td>US </td> </tr><tr> <td>875</td><td> 27599</td><td>ESCAMILLA </td><td>FRANCISCO </td><td>6689 CHURNET VALLEY </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89139 </td><td>US </td> </tr><tr> <td>CCR</td><td> 96208</td><td>COLLIER </td><td>SYLVIA </td><td>705 WASHINGTON #21 </td><td> </td><td>RENO </td><td>NV </td><td>89053 </td><td> </td> </tr><tr> <td>710</td><td> 113</td><td>YU </td><td>YENJEN </td><td>8120 MT ROYAL CT </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89128 </td><td>USA</td> </tr><tr> <td>190</td><td> 41643</td><td>MCBEATH </td><td>WILLIAM </td><td>2212 PAIUTE MEADOWS </td><td> </td><td>LAS VEGAS </td><td>NV </td><td>89134 </td><td>US </td> </tr> <!-- up to 300 rows --> </table> </div> <div id="pager"> </div> </div> </form> </body> </html>

Answer1:

It seems to me that you have the same problem as described in <a href="https://stackoverflow.com/questions/3491963/pagination-problem-in-jqgrid-with-array-data/3495210#3495210" rel="nofollow">Pagination problem in jqgrid with array data</a>.

Try to call

jQuery("#GridView1").setGridParam({ rowNum: 10 }).trigger("reloadGrid");

after tableToGrid.

Answer2:

You can write the following code as a workaround after calling tableToGrid

jQuery("#GridView1").jqGrid('setGridParam', {page: 1}).trigger("reloadGrid");

Recommend

  • ActionBar three-dot dropdown opens at the wrong place
  • Styling text for textarea Wicket
  • Batching in py2neo
  • How to display the hotel names that have the maximum count from data base by calculating sum in PHP?
  • Android error - Failed to find style 'toolbarStyle' in current theme
  • how to add semantic ui in a rails app?
  • Why are views not counted if you embed a youtube iframe dynamically using jquery?
  • NetBeans doesn't see style.css [duplicate]
  • Jquery Show & ScrollTop (or ScrollTo)
  • How to modify the HTML tag in Drupal 6?
  • Why does IE8 fail to resolve my JQuery selector for a checked radio option?
  • Rails AREL .where statement
  • RabbitMQ java client stops consuming messages
  • How to add regEx in angular filter
  • apply a javascript function to draggable copy
  • Implement JwtBearer Authentication in NSwag SwaggerUi
  • Outlines on links in IE9 remains when focus is changed
  • Center align outputs in ipython notebook
  • Simulate click Geckofx vb,net
  • What is the purpose of TaskExecutor in spring?
  • Adjust width of select element according to selected option's width
  • MySQL Order by column = x, column asc?
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • Jquery UI tool tip close icon
  • Is it possible to access block's scope in method?
  • NHibernate Validation Localization with S#arp Architecture
  • Change JButton Shape while respecting Look And Feel
  • RectangularRangeIndicator format like triangular using dojo
  • HTML download movie download link
  • Bug in WPF DataGrid
  • recyclerView does not call the onBindViewHolder when scroll in the view
  • Modifying destination and filename of gulp-svg-sprite
  • Redux, normalised entities and lodash merge
  • jQuery tmpl and DataLink beta
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • how does django model after text[] in postgresql [duplicate]
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • Unable to use reactive element in my shiny app