How to Add Advanced Data Table Widget in Weebly?

You can create simple tables using HTML <table> tag. But a simple table may not be always sufficient to showcase your data and there may be a need of complex data table with multiple features. Weebly offers official Simple Table app and you have may other options to insert tables in Weebly site. However, unlike WordPress which has dedicated plugins to insert complex tables, Weebly does not have in-built option.

If you want to add big data tables in Weebly, here we will explain how to add advanced data table widget using a jQuery plugin from datatables.net. The table will look like below. This code is based on the popular Bootstrap framework and we will also explain how to add this widget on your Weebly site.

Features of Data Table

The advanced data table widget will have the following features:

• Sortable based on any single column.
• Fully responsive made with Bootstrap.
• Filter the content with 10, 25, 50 and 100 records per page.
• Search box to search the content in any of the table cell.
• Stylish pagination for navigating to any page of the table with previous and next page option.
• Shows number of entries displayed along with total number of entries present in the table.

Download the Complete Code

Download the complete code for the advanced data table widget. The archive file contains the following files:

• advanced-table.html
• dataTables.bootstrap.css
• bootstrap.min.css
• jquery.min.js
• bootstrap.min.js
• dataTables.bootstrap.js
• jquery.dataTables.js

CSS and JS files are stored inside “CSS” and “JS” folders for appropriate structure and the HTML file resides outside these assets. You can use any structure to store CSS / JS files but you should add the links correctly based on the structure to link them in the HTML file. If this is a difficult task for you, consider using Bootstrap website builders like Mobirise. They offer ready-made blocks to insert on your site and publish quickly.

How to Add Advanced Data Table Widget on Your Site?

There are three steps to add the data table widget:

1. Adding CSS in Weebly

Add the following CSS to the header code section of your page:

<link rel="stylesheet" href="css/bootstrap.min.css">  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/dataTables.bootstrap.css"/>
<style>
.table-responsive {
overflow-x: hidden;
}
@media (max-width: 800px) {
.table-responsive {
overflow-x: auto;
}
</style>

Here we have used the CDN link for connecting font awesome icons, if you hosted font awesome icons on your site then you don’t need to add this link separately. Ensure to replace the “bootstrap.min.css” and “dataTables.bootstrap.css” links with the correct links from your site.

2. Adding Script

Add the below scripts to the footer code section of your page:

<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.dataTables.js"></script>
<script src="js/dataTables.bootstrap.js"></script>
<script>
$(document).ready(function () {
$('#dataTables-example').dataTable();
});
</script>

We have used Google jQuery library with “jquery.min.js”, remember the widget will not work without this jQuery script. If your site uses jQuery by default then you may not need to separately mention this link based on the versions.

3. Adding HTML

Add the below HTML code inside an embed code element. In this example, we are creating a table with 5 columns and the code contains data for header and one row. You can copy / paste the row data to add as many rows to the table. Ensure to add all the cell values as well as header and rows are having same number of columns for the table to work properly. You can use hyphen (-) to indicate blank data.

<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<!-- This is the header section of the table -->
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<!-- End of table header -->
<tbody>
<!-- This is the start of first row of the table -->
<tr>
<td>Trident</td>
<td>Internet Explorer 4.0</td>
<td>Win 95+</td>
<td>4</td>
<td>X</td>
</tr>
<!-- End of first row (copy and paste this block to append additional rows -->
<!-- Paste additional rows here -->
</tbody>
</table>
</div>
</div>

Learn more on how to insert codes in header and footer sections of your Weebly site.