Javascript Show data in Table
➤ CSS (Cascading Style Sheets)
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
➤ HTML Code
<table id="allDay" class="display" width="100%"></table>
➤ Javascript Code
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script>
var dataSet = [
[ "1", "January", "All", "31", "Day", "2021" ],
[ "2", "Febuary", "All", "28", "Day", "2021" ],
[ "3", "March", "All", "31", "Day", "2021" ],
[ "4", "April", "All", "30", "Day", "2021" ],
[ "5", "May", "All", "31", "Day", "2021" ],
[ "6", "June", "All", "30", "Day", "2021" ],
[ "7", "July", "All", "31", "Day", "2021" ],
[ "8", "August", "All", "31", "Day", "2021" ],
[ "9", "September", "All", "30", "Day", "2021" ],
[ "10", "October", "All", "31", "Day", "2021" ],
[ "11", "November", "All", "30", "Day", "2021" ],
[ "12", "December", "All", "31", "Day", "2021" ],
[ "13", "January", "All", "31", "Day", "2021" ],
[ "14", "Febuary", "All", "28", "Day", "2021" ],
[ "15", "March", "All", "31", "Day", "2021" ],
[ "16", "April", "All", "30", "Day", "2021" ],
[ "17", "May", "All", "31", "Day", "2021" ],
[ "18", "June", "All", "30", "Day", "2021" ],
[ "19", "July", "All", "31", "Day", "2021" ],
[ "20", "August", "All", "31", "Day", "2021" ],
[ "21", "September", "All", "30", "Day", "2021" ],
[ "22", "October", "All", "31", "Day", "2021" ],
[ "23", "November", "All", "30", "Day", "2021" ],
[ "24", "December", "All", "31", "Day", "2021" ]
];
$(document).ready(function() {
$('#allDay').DataTable( {
data: dataSet,
columns: [
{ title: "No." },
{ title: "Month" },
{ title: "All" },
{ title: "Date" },
{ title: "Day" },
{ title: "Year" }
]
} );
} );
</script>
ความคิดเห็น
แสดงความคิดเห็น