This is a migrated thread and some comments may be shown as answers.

Is it possible to load data from HTML table with pagination?

7 Answers 770 Views

Grid

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 10 Sep 2013, 06:58 AM

Hello,

Yes, it is possible. Please try with the below code snippet.

<div id="example" class="k-content">

<table id="grid">

<colgroup>

<col />

<col style="width: 110px" />

<col style="width: 120px" />

<col style="width: 130px" />

</colgroup>

<thead>

<tr>

<th data-field="make">

Car Make

</th>

<th data-field="model">

Car Model

</th>

<th data-field="year">

Year

</th>

<th data-field="category">

Category

</th>

<th data-field="airconditioner">

Air Conditioner

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

Volvo

</td>

<td>

S60

</td>

<td>

2010

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Audi

</td>

<td>

A4

</td>

<td>

2002

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

BMW

</td>

<td>

535d

</td>

<td>

2006

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

BMW

</td>

<td>

320d

</td>

<td>

2006

</td>

<td>

Saloon

</td>

<td>

No

</td>

</tr>

<tr>

<td>

VW

</td>

<td>

Passat

</td>

<td>

2007

</td>

<td>

Saloon

</td>

<td>

No

</td>

</tr>

<tr>

<td>

Peugeot

</td>

<td>

407

</td>

<td>

2006

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Honda

</td>

<td>

Accord

</td>

<td>

2008

</td>

<td>

Saloon

</td>

<td>

No

</td>

</tr>

<tr>

<td>

Alfa Romeo

</td>

<td>

159

</td>

<td>

2008

</td>

<td>

Saloon

</td>

<td>

No

</td>

</tr>

<tr>

<td>

Nissan

</td>

<td>

Almera

</td>

<td>

2001

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Mitsubishi

</td>

<td>

Lancer

</td>

<td>

2008

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Opel

</td>

<td>

Vectra

</td>

<td>

2008

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Toyota

</td>

<td>

Avensis

</td>

<td>

2008

</td>

<td>

Saloon

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Audi

</td>

<td>

Q7

</td>

<td>

2007

</td>

<td>

SUV

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Hyundai

</td>

<td>

Santa Fe

</td>

<td>

2012

</td>

<td>

SUV

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Nissan

</td>

<td>

Qashqai

</td>

<td>

2007

</td>

<td>

SUV

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Mercedez

</td>

<td>

B Class

</td>

<td>

2007

</td>

<td>

Hatchback

</td>

<td>

Yes

</td>

</tr>

<tr>

<td>

Lancia

</td>

<td>

Ypsilon

</td>

<td>

2006

</td>

<td>

Hatchback

</td>

<td>

Yes

</td>

</tr>

</tbody>

</table>

<script>

$(document).ready(function () {

$("#grid").kendoGrid({

height: 430,

sortable: true,

pageable: {

messages: {

empty: "No items to display"

},

input: false,

refresh: true,

pageSizes: true,

pageSizes: [10, 20, 30, 50]

}

});

$("#grid").data("kendoGrid").dataSource.pageSize(10);

});

</script>

</div>

Thanks,
Jayesh Goyani

Accepted

answered on 10 Mar 2020, 01:39 PM

Hi Saeed,

The Grid widget can be initialized from HTML table element and also have DataSource configured with transport and remote operations. With this setup a request will be made when requesting the items for a new page. For more information on initializing the Grid from a table element and data binding check out the resources below:

Regards,
Viktor Tachev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 22 Apr 2020, 02:51 PM

Hello Sanjay,

In order to implement the functionality I suggest using a Kendo Grid widget. Check the resources below that describe how the widget can be initialized and configured.

https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview

https://demos.telerik.com/kendo-ui/grid/index

That said, in order to show the progress and percentage information you can use templates for the Grid columns. The following example shows how a progress bar can be added to the Grid.

https://docs.telerik.com/kendo-ui/knowledge-base/add-a-progressbar-in-a-grid-cell

Showing row numbers can be achieved with the approach below:

https://docs.telerik.com/kendo-ui/knowledge-base/add-row-numbers

Give the suggestions a try and let me know how they work for you.

Regards,
Viktor Tachev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.