This is my html file in spring mvc broadleaf, I am want to add pagination in that. I created and access the one object with the name of json.
<!DOCTYPE html>
<html data-ng-app="myApp">
<head lang="en">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#example").dataTable( {
"bProcessing": false,
"bServerSide": false,
"sort": "position",
"sAjaxSource": "${json}",
"aoColumns": [
{ "mData": "Business Name" },
{ "mData": "Business User Name" },
{ "mData": "Role" },
{ "mData": "Contact Email" },
{ "mData": "Contact Phone" },
]
} );
} );
</script>
</head>
<body>
<div class="width_setter group" role="main">
<div>
<table id="example" class="display">
<tr><td th:text="${json}">Business Name</td><td>Business User Name</td>
<td>Role</td><td>Contact Mail</td><td>Contact Phone</td></tr>
</table></div>
</div>
</body>
</html>
The json object having the following values,
{
"modelList": [],
"iTotalRecords": 60,
"iTotalDisplayRecords": 60,
"aaData": [
{
"address": "Admin Master Access",
"organizationName": "ParkAvenue",
"organizationId": 475,
"modelList": [],
"shopOwnerName": "Administrator",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "044265612",
"shopOwnerLogin": "acumenadmin",
"shopOwnerPassword": "admin",
"shopOwnerUserId": -1,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"organizationName": "Femina1",
"organizationId": 486,
"modelList": [],
"shopOwnerName": "FeminaUser",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "1231231",
"shopOwnerLogin": "femina1",
"shopOwnerPassword": "femina1",
"shopOwnerUserId": 1150,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"organizationName": "Acumen",
"organizationId": 5,
"modelList": [],
"shopOwnerName": "administrator",
"shopOwnerLogin": "acumenadmin",
"shopOwnerPassword": "femina1",
"shopOwnerUserId": 1200,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Femina2",
"organizationId": 496,
"modelList": [],
"shopOwnerName": "FeminaUser3",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04423456",
"shopOwnerLogin": "femina3",
"shopOwnerPassword": "femina3",
"shopOwnerUserId": 1250,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Admin Master Access",
"organizationName": "Femina2",
"organizationId": 496,
"modelList": [],
"shopOwnerName": "Administrator",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04423456",
"shopOwnerLogin": "acumenadmin",
"shopOwnerPassword": "admin",
"shopOwnerUserId": -1,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "ParkAvenue",
"organizationId": 475,
"modelList": [],
"shopOwnerName": "femina4",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "044265612",
"shopOwnerLogin": "femina4",
"shopOwnerPassword": "femina4",
"shopOwnerUserId": 1350,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Porsche",
"organizationId": 466,
"modelList": [],
"shopOwnerName": "porsche5050",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "221212",
"shopOwnerLogin": "porsche",
"shopOwnerPassword": "tested",
"shopOwnerUserId": 1050,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Samson",
"organizationId": 546,
"modelList": [],
"shopOwnerName": "Femina-Pradeep",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123465",
"shopOwnerLogin": "feminaPradeep",
"shopOwnerPassword": "feminaPradeep",
"shopOwnerUserId": 1450,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Samson Lighting",
"organizationId": 554,
"modelList": [],
"shopOwnerName": "Xavier Pradep",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "12345657",
"shopOwnerLogin": "acumenlb4d",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1500,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Rani Mahal",
"organizationId": 564,
"modelList": [],
"shopOwnerName": "Rani",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123456789",
"shopOwnerLogin": "acumenrani",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1550,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal Egmore",
"organizationId": 574,
"modelList": [],
"shopOwnerName": "Kusal Egm",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "acumenkusalegm",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1551,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "Kusal ECR",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "acumenkusalecr",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1552,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Groupm",
"organizationId": 693,
"modelList": [],
"shopOwnerName": "Groupm",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04445542000",
"shopOwnerLogin": "groupm",
"shopOwnerPassword": "groupm",
"shopOwnerUserId": 1600,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Acumen",
"organizationId": 5,
"modelList": [],
"shopOwnerName": "MuruganV",
"shopOwnerLogin": "murugan",
"shopOwnerPassword": "murugan",
"shopOwnerUserId": 1650,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Acumen",
"organizationId": 5,
"modelList": [],
"shopOwnerName": "MuruganvvV",
"shopOwnerLogin": "muruganvv",
"shopOwnerPassword": "murugan",
"shopOwnerUserId": 1652,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "pvr",
"organizationId": 705,
"modelList": [],
"shopOwnerName": "PVR",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "acumenpvr",
"shopOwnerPassword": "acumenpvr",
"shopOwnerUserId": 1700,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Testing",
"organizationId": 722,
"modelList": [],
"shopOwnerName": "TESTing Demo",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "acumenTESTing",
"shopOwnerPassword": "acumenTESTing",
"shopOwnerUserId": 1701,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal Shop Ecr",
"organizationId": 771,
"modelList": [],
"shopOwnerName": "Kusal Shop ECR",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04424490200",
"shopOwnerLogin": "kusalecr",
"shopOwnerPassword": "kusalecr",
"shopOwnerUserId": 1705,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Acumen",
"organizationId": 5,
"modelList": [],
"shopOwnerName": "MuruganTEST",
"shopOwnerLogin": "muruganTEST",
"shopOwnerPassword": "murugan",
"shopOwnerUserId": 1706,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Admin Master Access",
"organizationName": "Hyundai",
"organizationId": 921,
"modelList": [],
"shopOwnerName": "Administrator",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "1231231231",
"shopOwnerLogin": "acumenadmin",
"shopOwnerPassword": "admin",
"shopOwnerUserId": -1,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Admin Master Access",
"organizationName": "Business Testing",
"organizationId": 929,
"modelList": [],
"shopOwnerName": "Administrator",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123456",
"shopOwnerLogin": "acumenadmin",
"shopOwnerPassword": "admin",
"shopOwnerUserId": -1,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Ananda Bhavan",
"organizationId": 781,
"modelList": [],
"shopOwnerName": "Ananda Bhavan",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04442333333",
"shopOwnerLogin": "anandabhavan",
"shopOwnerPassword": "anandabhavan",
"shopOwnerUserId": 1707,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal Shop Egmore",
"organizationId": 791,
"modelList": [],
"shopOwnerName": "kusal Shop Egmore",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04428193372",
"shopOwnerLogin": "kusalegmore",
"shopOwnerPassword": "kusalegmore",
"shopOwnerUserId": 1708,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Rani Marriage Hall",
"organizationId": 801,
"modelList": [],
"shopOwnerName": "Rani Mahal",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "0442599090",
"shopOwnerLogin": "ranimahal",
"shopOwnerPassword": "ranimahal",
"shopOwnerUserId": 1709,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Samson Lighting Pvt Ltd",
"organizationId": 811,
"modelList": [],
"shopOwnerName": "Samson",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04426671125",
"shopOwnerLogin": "samson",
"shopOwnerPassword": "samson",
"shopOwnerUserId": 1710,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "google tech",
"organizationId": 825,
"modelList": [],
"shopOwnerName": "Google",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123456789",
"shopOwnerLogin": "googleuser",
"shopOwnerPassword": "googleuser",
"shopOwnerUserId": 1750,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "google tech hyd",
"organizationId": 833,
"modelList": [],
"shopOwnerName": "Google",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "125474545",
"shopOwnerLogin": "googleuser",
"shopOwnerPassword": "googleuser",
"shopOwnerUserId": 1750,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Propel Fitness",
"organizationId": 908,
"modelList": [],
"shopOwnerName": "acumenpropel",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "3234324",
"shopOwnerLogin": "acumenpropel",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1800,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Propel Fitness",
"organizationId": 855,
"modelList": [],
"shopOwnerName": "acumenpropel",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "04428261222",
"shopOwnerLogin": "acumenpropel",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1800,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Hyundai",
"organizationId": 921,
"modelList": [],
"shopOwnerName": "Pavan",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "1231231231",
"shopOwnerLogin": "hyundai",
"shopOwnerPassword": "hyundai",
"shopOwnerUserId": 1850,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Acumen",
"organizationId": 5,
"modelList": [],
"shopOwnerName": "asdfghjkl",
"shopOwnerLogin": "pavan",
"shopOwnerPassword": "pavan",
"shopOwnerUserId": 1903,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Tyre Store",
"organizationId": 983,
"modelList": [],
"shopOwnerName": "Pavan",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "8754566199",
"shopOwnerLogin": "tyrestorechennai",
"shopOwnerPassword": "tyrestorechennai",
"shopOwnerUserId": 1950,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Mokaba",
"organizationId": 1002,
"modelList": [],
"shopOwnerName": "acumenmokaba",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123456",
"shopOwnerLogin": "acumenmokaba",
"shopOwnerPassword": "acumenmokaba",
"shopOwnerUserId": 2000,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Mokaba Chennai",
"organizationId": 1018,
"modelList": [],
"shopOwnerName": "acumenmokabauser",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "2343422",
"shopOwnerLogin": "acumenmokabauser",
"shopOwnerPassword": "acumenmokabauser",
"shopOwnerUserId": 2050,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Mani Shop",
"organizationId": 2500,
"modelList": [],
"shopOwnerName": "Manikandan",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "044630630",
"shopOwnerLogin": "mani",
"shopOwnerPassword": "mani",
"shopOwnerUserId": 2150,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "kusal vadapalani",
"organizationId": 2549,
"modelList": [],
"shopOwnerName": "Kusal ECR",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "56546546",
"shopOwnerLogin": "acumenkusalecr",
"shopOwnerPassword": "admin1",
"shopOwnerUserId": 1552,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "kusal vadapalani",
"organizationId": 2549,
"modelList": [],
"shopOwnerName": "asdfghjkl",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "56546546",
"shopOwnerLogin": "pavan",
"shopOwnerPassword": "pavan",
"shopOwnerUserId": 1903,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "pradeep",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "pradeeptest",
"shopOwnerPassword": "pradeeptest",
"shopOwnerUserId": 2200,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "pradeeptest",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "pradeeptest1",
"shopOwnerPassword": "pradeeptest1",
"shopOwnerUserId": 2201,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "pradeeptest2",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "pradeeptest2",
"shopOwnerPassword": "pradeeptest2",
"shopOwnerUserId": 2250,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "sdfgfds",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "sdfgfds",
"shopOwnerPassword": "sdfgfds",
"shopOwnerUserId": 2300,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "pradeepj",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "pradeepj",
"shopOwnerPassword": "pradeepj",
"shopOwnerUserId": 2301,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "ws",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "ws",
"shopOwnerPassword": "ws",
"shopOwnerUserId": 2302,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "pradeeptest123",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "pradeeptest123",
"shopOwnerPassword": "pradeeptest123",
"shopOwnerUserId": 2303,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "kusal vadapalani",
"organizationId": 2549,
"modelList": [],
"shopOwnerName": "rade",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "56546546",
"shopOwnerLogin": "rade",
"shopOwnerPassword": "rade",
"shopOwnerUserId": 2304,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Kusal ECR",
"organizationId": 584,
"modelList": [],
"shopOwnerName": "pradeeptesting",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123654789",
"shopOwnerLogin": "pradeeptesting",
"shopOwnerPassword": "pradeeptesting",
"shopOwnerUserId": 2350,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "kusal vadapalani",
"organizationId": 2549,
"modelList": [],
"shopOwnerName": "pradeep12434",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "56546546",
"shopOwnerLogin": "pradeep12434",
"shopOwnerPassword": "pradeep12434",
"shopOwnerUserId": 2400,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "woodlands10",
"organizationId": 3249,
"modelList": [],
"shopOwnerName": "pradeepmac1",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "435345",
"shopOwnerLogin": "pradeepmac",
"shopOwnerPassword": "acumen",
"shopOwnerUserId": 2100,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "woodlands",
"organizationId": 3231,
"modelList": [],
"shopOwnerName": "pradeepmac1",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "123",
"shopOwnerLogin": "pradeepmac",
"shopOwnerPassword": "acumen",
"shopOwnerUserId": 2100,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Shop Owner",
"organizationName": "Pradeep T",
"organizationId": 3356,
"modelList": [],
"shopOwnerName": "pradeepmac1",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "3424324",
"shopOwnerLogin": "pradeepmac",
"shopOwnerPassword": "acumen",
"shopOwnerUserId": 2100,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Partner",
"organizationName": "xxxxxx",
"organizationId": 3431,
"modelList": [],
"shopOwnerName": "venkat",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "044630630",
"shopOwnerLogin": "venkat",
"shopOwnerPassword": "venkat",
"shopOwnerUserId": 2500,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
},
{
"address": "Partner",
"organizationName": "xperia",
"organizationId": 3453,
"modelList": [],
"shopOwnerName": "xperia.partnar",
"shopOwnerEmail": "[email protected]",
"shopOwnerPhone": "044630630",
"shopOwnerLogin": "xperia.partnar",
"shopOwnerPassword": "xperia.partnar",
"shopOwnerUserId": 2550,
"iTotalRecords": 0,
"iTotalDisplayRecords": 0
}
]
}
How to add this to the javascript file and create pagination with sorting and searching options.
