Bootstrap

Style 1

Results :

c	First Name	Last Name	Email	Mobile No.	Image	Status	Actions
c	Jane	Lamb	johndoe@yahoo.com	555-555-5555		Approved
c	Linda	Nelson	linda@gmail.com	555-555-6666		Suspended
c	Kelly	Young	kelly@live.com	777-555-5555		Closed
c	Vincent	Carpenter	vinnyc@outlook.com	555-666-5555		Approved
c	Lila	Perry	lila@adobe.com	444-444-4444		Suspended

Showing page 1 of 2

1
2

Style 2

Results :

c	Name	Customers	Email	Contact	Status	Actions
c	Sean Freeman		seanfreeman@admin.com	555-555-5555	Approved	View Edit View Response Delete
c	Donna Rogers		donnarogers@user.com	555-555-6666	Suspended	View Edit View Response Delete
c	Irene Collins		irene@superadmin.com	777-555-5555	Closed	View Edit View Response Delete
c	Vincent Carpenter		vincentC@admin.com	555-666-5555	Approved	View Edit View Response Delete
c	Susan Phillips		susan@yahoo.com	444-444-4444	Suspended	View Edit View Response Delete

Showing page 1 of 2

1
2

Style 3

Results :

Record Id	Image	First Name	Last Name	Email	Mobile No.	Status	Actions
1		Donna	Rogers	donna@yahoo.com	555-555-5555	Approved
2		Andy	King	andyking@gmail.com	555-555-6666	Suspended
3		Alma	Clarke	Alma@live.com	777-555-5555	Closed
4		Vincent	Carpenter	vinnyc@outlook.com	555-666-5555	Approved
5		Kristen	Beck	kristen@adobe.com	444-444-4444	Suspended

Showing page 1 of 2

1
2

$(document).ready(function() { App.init(); }); // var e; c1 = $('#style-1').DataTable({ "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" + "<'table-responsive'tr>" + "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>", headerCallback:function(e, a, t, n, s) { e.getElementsByTagName("th")[0].innerHTML='\n\nc\n' }, columnDefs:[ { targets:0, width:"30px", className:"", orderable:!1, render:function(e, a, t, n) { return'\n\nc\n' } }], "oLanguage": { "oPaginate": { "sPrevious": '', "sNext": '' }, "sInfo": "Showing page _PAGE_ of _PAGES_", "sSearch": '', "sSearchPlaceholder": "Search...", "sLengthMenu": "Results : _MENU_", }, "lengthMenu": [5, 10, 20, 50], "pageLength": 5 }); multiCheck(c1); c2 = $('#style-2').DataTable({ "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" + "<'table-responsive'tr>" + "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>", headerCallback:function(e, a, t, n, s) { e.getElementsByTagName("th")[0].innerHTML='\n\nc\n' }, columnDefs:[ { targets:0, width:"30px", className:"", orderable:!1, render:function(e, a, t, n) { return'\n\nc\n' } }], "oLanguage": { "oPaginate": { "sPrevious": '', "sNext": '' }, "sInfo": "Showing page _PAGE_ of _PAGES_", "sSearch": '', "sSearchPlaceholder": "Search...", "sLengthMenu": "Results : _MENU_", }, "lengthMenu": [5, 10, 20, 50], "pageLength": 5 }); multiCheck(c2); c3 = $('#style-3').DataTable({ "dom": "<'dt--top-section'<'row'<'col-12 col-sm-6 d-flex justify-content-sm-start justify-content-center'l><'col-12 col-sm-6 d-flex justify-content-sm-end justify-content-center mt-sm-0 mt-3'f>>>" + "<'table-responsive'tr>" + "<'dt--bottom-section d-sm-flex justify-content-sm-between text-center'<'dt--pages-count mb-sm-0 mb-3'i><'dt--pagination'p>>", "oLanguage": { "oPaginate": { "sPrevious": '', "sNext": '' }, "sInfo": "Showing page _PAGE_ of _PAGES_", "sSearch": '', "sSearchPlaceholder": "Search...", "sLengthMenu": "Results : _MENU_", }, "stripeClasses": [], "lengthMenu": [5, 10, 20, 50], "pageLength": 5 }); multiCheck(c3);