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 196 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Divakar
Top achievements
Rank 1
Divakar asked on 10 Sep 2013, 06:35 AM
I am using kendo grid to populate data in that grid i use HTML table as datasource. With the help initialization from table demo sample i loaded data in grid. But my problem is to show pagination for that grid?

7 Answers, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
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 />
            <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
0
Accepted
Divakar
Top achievements
Rank 1
answered on 10 Sep 2013, 11:09 AM
Thanx it worked with your snippet...
0
Saeed
Top achievements
Rank 1
answered on 07 Mar 2020, 12:29 PM
can I have a kendo grid table which loads data from html table with a custom pagination that calls an ajax request when pagination has changed?
0
Viktor Tachev
Telerik team
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.
0
Sanjay
Top achievements
Rank 1
answered on 21 Apr 2020, 01:41 AM
Can this design be rendered https://bbbootstrap.com/snippets/bordered-table-pagination-and-card-83072880 for table with pagination
0
Sanjay
Top achievements
Rank 1
answered on 21 Apr 2020, 01:43 AM
<a href="https//google.com">Datatables with pagination</a>
0
Viktor Tachev
Telerik team
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.
Tags
Grid
Asked by
Divakar
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Divakar
Top achievements
Rank 1
Saeed
Top achievements
Rank 1
Viktor Tachev
Telerik team
Sanjay
Top achievements
Rank 1
Share this question
or