Pagination in Dynamic Data List

[Praful Shukla，修改在8 年前。]

Hello Everyone,
I have created a Dynamic Data List for Customer Information and currently it contains more than 1000 records which are increasing day by day.So I want to paginate my DDL(let say 50 customer per page).But have no idea how to do so.Please help me to sort this out.Any help is appreciated.

Thanks & Regards,
Praful

[Neha Goyal，修改在8 年前。]

Have you created any template for this. You can use dataTable jquery plugin to achieve this.
If you share me your template, i can modify and will integrate that template with dataTable which will support pagination.


Regards:
Neha

[Praful Shukla，修改在8 年前。]

Thanks Neha for the Quick Reply,following is the Velocity Script for Display Template of my DDL:

#if (!$records.isEmpty())
<table class="table table-bordered table-hover table-striped">
<thead class="table-columns">
<th class="table-first-header" >Customer ID</th>
<th class="" >Name</th>
<th class="" >Address</th>
</thead>
#foreach ($cur_record in $records)
<tr>
<td>$cur_record.getFieldValue("Custome_ID", $locale)</td>
<td>$cur_record.getFieldValue("Name", $locale)</td>
<td>$cur_record.getFieldValue("Address", $locale)</td>
</tr>
#end
</table>
#end

[Neha Goyal，修改在8 年前。]

Praful Shukla:

Thanks Neha for the Quick Reply,following is the Velocity Script for Display Template of my DDL:

#if (!$records.isEmpty())
<table class="table table-bordered table-hover table-striped">
<thead class="table-columns">
<th class="table-first-header" >Customer ID</th>
<th class="" >Name</th>
<th class="" >Address</th>
</thead>
#foreach ($cur_record in $records)
<tr>
<td>$cur_record.getFieldValue("Custome_ID", $locale)</td>
<td>$cur_record.getFieldValue("Name", $locale)</td>
<td>$cur_record.getFieldValue("Address", $locale)</td>
</tr>
#end
</table>
#end

<link rel="stylesheet" type="text/css" href="Editor-1.5.5/css/editor.dataTables.css">
<script type="text/javascript" src="Editor-1.5.5/js/dataTables.editor.js"></script>
<script>
$(document).ready(function(){
//For Pagination with DataTable
$('table#data-table').dataTable( {
"paging": true,
"searching":false,
"info": false
});
});
</script>

#if (!$records.isEmpty())
<table id="data-table" class="table table-bordered table-hover table-striped">
<thead class="table-columns">
<th class="table-first-header" >Customer ID</th>
<th class="" >Name</th>
<th class="" >Address</th>
</thead>
#foreach ($cur_record in $records)
<tr>
<td>$cur_record.getFieldValue("Custome_ID", $locale)</td>
<td>$cur_record.getFieldValue("Name", $locale)</td>
<td>$cur_record.getFieldValue("Address", $locale)</td>
</tr>
#end
</table>


Let me know if this template fix your problem.


Regards:
Naha

[Praful Shukla，修改在8 年前。]

Neha Goyal:

Praful Shukla:

Thanks Neha for the Quick Reply,following is the Velocity Script for Display Template of my DDL:

#if (!$records.isEmpty())
<table class="table table-bordered table-hover table-striped">
<thead class="table-columns">
<th class="table-first-header" >Customer ID</th>
<th class="" >Name</th>
<th class="" >Address</th>
</thead>
#foreach ($cur_record in $records)
<tr>
<td>$cur_record.getFieldValue("Custome_ID", $locale)</td>
<td>$cur_record.getFieldValue("Name", $locale)</td>
<td>$cur_record.getFieldValue("Address", $locale)</td>
</tr>
#end
</table>
#end

<link rel="stylesheet" type="text/css" href="Editor-1.5.5/css/editor.dataTables.css">
<script type="text/javascript" src="Editor-1.5.5/js/dataTables.editor.js"></script>
<script>
$(document).ready(function(){
//For Pagination with DataTable
$('table#data-table').dataTable( {
"paging": true,
"searching":false,
"info": false
});
});
</script>

#if (!$records.isEmpty())
<table id="data-table" class="table table-bordered table-hover table-striped">
<thead class="table-columns">
<th class="table-first-header" >Customer ID</th>
<th class="" >Name</th>
<th class="" >Address</th>
</thead>
#foreach ($cur_record in $records)
<tr>
<td>$cur_record.getFieldValue("Custome_ID", $locale)</td>
<td>$cur_record.getFieldValue("Name", $locale)</td>
<td>$cur_record.getFieldValue("Address", $locale)</td>
</tr>
#end
</table>


Let me know if this template fix your problem.


Regards:
Naha

Hi,
Sorry to say Neha,but it didn't worked..

[Manish Yadav，修改在8 年前。]

Have you check javascript imports .....



Try with
https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js

[Neha Goyal，修改在8 年前。]

Shukla,

Did you download js and css file.What error you are getting?
Alternatively go with Manish approach.

Regards:
Neha

[Praful Shukla，修改在8 年前。]

Neha Goyal:

Shukla,

Did you download js and css file.What error you are getting?
Alternatively go with Manish approach.

Regards:
Neha

Hello,
Where should I store the downloaded css file..??Please guide me I'm new to Liferay.
I have just written the above script that you have provided in my Display Template but
the displayed result is not paginated.

[Neha Goyal，修改在8 年前。]

Please try this,

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>

<script>
$(document).ready(function(){
//For Pagination with DataTable
$('table#data-table').dataTable( {
"paging": true,
"searching":false,
"info": false
});
});
</script>

#if (!$records.isEmpty())
<table id="data-table" class="table table-bordered table-hover table-striped">
<thead class="table-columns">
<th class="table-first-header" >Customer ID</th>
<th class="" >Name</th>
<th class="" >Address</th>
</thead>
#foreach ($cur_record in $records)
<tr>
<td>$cur_record.getFieldValue("Custome_ID", $locale)</td>
<td>$cur_record.getFieldValue("Name", $locale)</td>
<td>$cur_record.getFieldValue("Address", $locale)</td>
</tr>
#end
</table>

[Praful Shukla，修改在8 年前。]

Thank you so much..!!
It's working now..!!

[Neha Goyal，修改在8 年前。]

Praful Shukla:

Thank you so much..!!
It's working now..!!

happy

[Abdur rasheed，修改在8 年前。]

Hi Shukla,
We can implement from search container pagination, we have no. of docs. for pagination.

https://www.liferay.com/community/wiki/-/wiki/Main/Pagination+in+Liferay

Thanks
Rasheed

[Karl Panti，修改在4 年前。]

Hi guys, Im a new member here. 
seeking for your help.. i've been spending the whole week trying to find a way to my program..This is also about DataTable.
I also used some of your codes above... but it didnt worked for my table..

 this is my code.. the data is being looped by foreach
 <div class="main">
        <table id="data-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Age</th>
                    <th>Full Address</th>
                    <th>Action</th>
                    <th>Grade</th>
                    <th>Section</th>
                </tr>
            </thead>
            @foreach (var info in Model)
            {
                <tbody>
                    <tr>
                        <td>@info.StudentName</td>
                        <td>@info.StudentAge</td>
                        <td>@info.StudentAddress </td>
                        <td>
                            @Html.ActionLink("Edit", "Edit", new { id = info.StudentId }) |
                            @Html.ActionLink("Delete", "Delete", new { id = info.StudentId })
                        </td>
                        <td>@info.StudentGrade</td>
                        <td>@info.StudentSection </td>
                    </tr>
                </tbody>
            }        </table>
    </div>

This is the script.. 

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('table#data-table').DataTable({
                "paging": true,
                "searching": false,
                "info": false
            });
        });
    </script>