Q. What is material design?
Ans:- Material design is a design technique/language. It uses a grid-based layout, responsive animation, and transition, padding, depth effects show as lightning and shadow. It is designed to optimize user experience with natural motions, 3D effects, and realistic lighting.
DataTable: It is a plug-in for the jQuery Javascript library. It will add features like fast search in the table, paginations, column sorting, etc with the minimum code.
In this example code, I have used DataTable (Jquery plug-in javascript library) in the visualforce page. Find the full code below.
<apex:page controller="DatatableCntrl" sidebar="false">
<head>
<apex:includescript value="https://code.jquery.com/jquery-3.3.1.js"/>
<apex:includescript value="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"/>
<apex:includescript value="https://cdn.datatables.net/1.10.19/js/dataTables.material.min.js"/>
<apex:stylesheet value="https://cdnjs.cloudflare.com/ajax/libs/material-design-lite/1.1.0/material.min.css"/>
<apex:stylesheet value="https://cdn.datatables.net/1.10.19/css/dataTables.material.min.css"/>
<script>
j$ = jQuery.noConflict();
j$(document).ready( function () {
var accTable = j$('[id$="accTable"]').DataTable({ //datatable
columnDefs: [
{
targets: [ 0, 1, 2 ],
className: 'mdl-data-table__cell--non-numeric'
}
]
});
});
</script>
<style>
div.dataTables_wrapper div.dataTables_filter {
text-align: right;
margin-right: 2%;
/* border-radius: 2px; */
/* height: 51px; */
}
</style>
</head>
<body>
<table id="accTable" class="mdl-data-table" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Billing State</th>
<th>Website</th>
</tr>
</thead>
<tbody>
<apex:repeat value="{!accList}" var="acc">
<tr>
<td>{!acc.Name}</td>
<td>{!acc.BillingState}</td>
<td>{!acc.Website }</td>
</tr>
</apex:repeat>
</tbody>
</table>
</body>
</apex:page>
public class DatatableCntrl{
public List<Account> accList {get; set;}
public DatatableCntrl(){
accList = [SELECT Name, BillingState,Website FROM Account where BillingState!='' and Website !='' order by name ];
}
}
References:
The article was up to the point and described the information very effectively. Thanks to blog author for wonderful and informative post.
ReplyDeletewebsite development
Well Said, you have furnished the right information that will be useful to anyone at all time. Thanks for sharing your Ideas.
ReplyDeleteBilling Software
This comment has been removed by the author.
ReplyDelete