Bootstrap table by wenzhixin

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

CodeFunctionName
What is this?

Public

Tested

Imported
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 >

Views 3,202

Downloads 2,012

CodeID
DB ID