Working jquery bootstrap table, with pagination, search, sort and column selection.
Actual working features, not just displaying those records
Used it is some of my websites
https://github.com/wenzhixin/bootstrap-table
Code also has two js functions to sort by html content to go around sorting issue
htmlAttribTitle and htmlSorter
You just need to include files in screenshot, that is what I did
Edit 2019-05-25: Added another zip for v1.14.2 supporting Bootstrap v4
Please note: The default download will be downloading the old version which is v1.13
Control all features using data attributes.
Still have some issues in Full-screen, Font Awesome 5, and table height column width with headers, but still worth the time you spend to insert it into your site.
Code I used to implement it was
<%
TableRows = ""
TableHead = " <thead class=""thead-dark"" > <tr >" & vbcrlf
TableHead = TableHead & " <th data-field=""ID"" data-sortable=""true"" >ID </th >" & vbcrlf
TableHead = TableHead & " <th data-visible=""false"" >Img </th >" & vbcrlf
TableHead = TableHead & " <th data-field=""title"" data-sorter="htmlSorter" data-sortable=""true"" >Title </th >" & vbcrlf
TableHead = TableHead & " <th data-visible=""false"" data-sorter="htmlSorter" >Tags </th >" & vbcrlf
TableHead = TableHead & " <th data-field=""Date"" data-sortable=""true"" >Dated </th >" & vbcrlf
TableHead = TableHead & " <th data-field=""Status"" data-sortable=""true"" >Status </th >" & vbcrlf
TableHead = TableHead & " </tr > </thead >" & vbcrlf
For I = 1 to AllRows
BBlogID = rsDB.Fields.Item("ID").Value
BBlogTitle = rsDB.Fields.Item("Title").Value
BBlogDate = rsDB.Fields.Item("DateAdded").Value
BBlogBody = rsDB.Fields.Item("Body").Value
BBlogTags = rsDB.Fields.Item("Tags").Value
BBlogImg = rsDB.Fields.Item("ImageURL").Value
BBlogUID = rsDB.Fields.Item("UserID").Value
BBlogStatus = rsDB.Fields.Item("Status").Value
TableRows = TableRows & ""
TableRows = TableRows & " <tr > <td >" & BBlogID & " </td >" & vbcrlf
TableRows = TableRows & " <td > <img src=""" & BBlogImage & """ width=""100px""/ > </td >" & vbcrlf
TableRows = TableRows & " <td > <a href=""" & PageBlog_URL & "?ID=" & BBlogID & """ target=""_blank"" >" & BBlogTitle & " </a >" & vbcrlf
TableRows = TableRows & " <a href=""" & PageBlog_URL & "?EditID=" & BBlogID & """ target=""_blank"" > <i class=""far fa-edit text-dark"" > </i > </a >" & vbcrlf
TableRows = TableRows & " </td >" & vbcrlf
' TableRows = TableRows & " <td >" & BBlogTitle & " </td >" & vbcrlf
TableRows = TableRows & " <td >" & BBlogTags & " </td >" & vbcrlf
TableRows = TableRows & " <td >" & BBlogDate & " </td >" & vbcrlf
TableRows = TableRows & " <td >" & BBlogStatus & " </td >" & vbcrlf
TableRows = TableRows & " </tr >" & vbcrlf
Next
% >
<table data-toggle="table" data-pagination="true" data-search="true"
data-show-columns="true" data-cache="false" data-icons-prefix="fa"
data-id-field="ID" data-minimum-count-columns="3"
data-buttons-class="outline-dark"
data-classes="table table-sm"
>
<%=TableHead% >
<tbody >
<%=TableRows% >
<!--
<tr >
<td >2 </td >
<td >Item 2 </td >
<td >$2 </td >
</tr >
<tr >
<td >1 </td >
<td >Item 1 </td >
<td >$1 </td >
</tr >
<tr >
<td >2 </td >
<td >Item 2 </td >
<td >$2 </td >
</tr >
-- >
</tbody >
</table >
<script >
function htmlSorter(a, b) {
var a = $(a).text().toUpperCase();
var b = $(b).text().toUpperCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
};
function htmlAttribTitle(a, b) {
var a = $(a).attr("title");
var b = $(b).attr("title");
if (a < b) return -1;
if (a > b) return 1;
return 0;
}
</script >
Still have some issues in Full-screen, Font Awesome 5, and table height column width with headers, but still worth the time you spend to insert it into your site.
Code I used to implement it was
<%
TableRows = ""
TableHead = " <thead class=""thead-dark"" > <tr >" & vbcrlf
TableHead = TableHead & " <th data-field=""ID"" data-sortable=""true"" >ID </th >" & vbcrlf
TableHead = TableHead & " <th data-visible=""false"" >Img </th >" & vbcrlf
TableHead = TableHead & " <th data-field=""title"" data-sorter="htmlSorter" data-sortable=""true"" >Title </th >" & vbcrlf
TableHead = TableHead & " <th data-visible=""false"" data-sorter="htmlSorter" >Tags </th >" & vbcrlf
TableHead = TableHead & " <th data-field=""Date"" data-sortable=""true"" >Dated </th >" & vbcrlf
TableHead = TableHead & " <th data-field=""Status"" data-sortable=""true"" >Status </th >" & vbcrlf
TableHead = TableHead & " </tr > </thead >" & vbcrlf
For I = 1 to AllRows
BBlogID = rsDB.Fields.Item("ID").Value
BBlogTitle = rsDB.Fields.Item("Title").Value
BBlogDate = rsDB.Fields.Item("DateAdded").Value
BBlogBody = rsDB.Fields.Item("Body").Value
BBlogTags = rsDB.Fields.Item("Tags").Value
BBlogImg = rsDB.Fields.Item("ImageURL").Value
BBlogUID = rsDB.Fields.Item("UserID").Value
BBlogStatus = rsDB.Fields.Item("Status").Value
TableRows = TableRows & ""
TableRows = TableRows & " <tr > <td >" & BBlogID & " </td >" & vbcrlf
TableRows = TableRows & " <td > <img src=""" & BBlogImage & """ width=""100px""/ > </td >" & vbcrlf
TableRows = TableRows & " <td > <a href=""" & PageBlog_URL & "?ID=" & BBlogID & """ target=""_blank"" >" & BBlogTitle & " </a >" & vbcrlf
TableRows = TableRows & " <a href=""" & PageBlog_URL & "?EditID=" & BBlogID & """ target=""_blank"" > <i class=""far fa-edit text-dark"" > </i > </a >" & vbcrlf
TableRows = TableRows & " </td >" & vbcrlf
' TableRows = TableRows & " <td >" & BBlogTitle & " </td >" & vbcrlf
TableRows = TableRows & " <td >" & BBlogTags & " </td >" & vbcrlf
TableRows = TableRows & " <td >" & BBlogDate & " </td >" & vbcrlf
TableRows = TableRows & " <td >" & BBlogStatus & " </td >" & vbcrlf
TableRows = TableRows & " </tr >" & vbcrlf
Next
% >
<table data-toggle="table" data-pagination="true" data-search="true"
data-show-columns="true" data-cache="false" data-icons-prefix="fa"
data-id-field="ID" data-minimum-count-columns="3"
data-buttons-class="outline-dark"
data-classes="table table-sm"
>
<%=TableHead% >
<tbody >
<%=TableRows% >
<!--
<tr >
<td >2 </td >
<td >Item 2 </td >
<td >$2 </td >
</tr >
<tr >
<td >1 </td >
<td >Item 1 </td >
<td >$1 </td >
</tr >
<tr >
<td >2 </td >
<td >Item 2 </td >
<td >$2 </td >
</tr >
-- >
</tbody >
</table >
<script >
function htmlSorter(a, b) {
var a = $(a).text().toUpperCase();
var b = $(b).text().toUpperCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
};
function htmlAttribTitle(a, b) {
var a = $(a).attr("title");
var b = $(b).attr("title");
if (a < b) return -1;
if (a > b) return 1;
return 0;
}
</script >
Views 3,157
Downloads 1,986
CodeID
DB ID