Bootstrap Table
HTML
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table data-toggle="table" data-search=true data-multi-search:",">
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Forks</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr id="tr-id-1" class="tr-class-1">
<td id="td-id-1" class="td-class-1">
<a href="https://github.com/wenzhixin/bootstrap-table">bootstrap-table</a>
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr id="tr-id-2" class="tr-class-2">
<td id="td-id-2" class="td-class-2">
<a href="https://github.com/wenzhixin/multiple-select">multiple-select</a>
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr id="tr-id-3" class="tr-class-3">
<td id="td-id-3" class="td-class-3">
<a href="https://github.com/wenzhixin/bootstrap-show-password">bootstrap-show-password</a>
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr id="tr-id-4" class="tr-class-4">
<td id="td-id-4" class="td-class-4">
<a href="https://github.com/wenzhixin/blog">blog</a>
</td>
<td>13</td>
<td>4</td>
<td>my blog</td>
</tr>
<tr id="tr-id-5" class="tr-class-5">
<td id="td-id-5" class="td-class-5">
<a href="https://github.com/wenzhixin/scutech-redmine">scutech-redmine</a>
<td>6</td>
<td>3</td>
<td>Redmine notification tools for chrome extension.</td>
...
JavaScript
/**
* @author: Dennis Hernández
* @webSite: http://djhvscf.github.io/Blog
* @version: v1.0.0
*/
!function ($) {
'use strict';
$.extend($.fn.bootstrapTable.defaults, {
multipleSearch: true,
delimeter: " "
});
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_initSearch = BootstrapTable.prototype.initSearch;
BootstrapTable.prototype.initSearch = function () {
if (this.options.multipleSearch) {
if (this.searchText === undefined) {
return;
}
var strArray = this.searchText.split(this.options.delimeter),
that = this,
f = $.isEmptyObject(this.filterColumns) ? null : this.filterColumns,
dataFiltered = [];
if (strArray.length === 1) {
_initSearch.apply(this, Array.prototype.slice.apply(arguments));
} else {
for (var i = 0; i < strArray.length; i++) {
var str = strArray[i].trim();
dataFiltered = str ? $.grep(dataFiltered.length === 0 ? this.options.data : dataFiltered, function (item, i) {
for (var key in item) {
key = $.isNumeric(key) ? parseInt(key, 10) : key;
var value = item[key],
column = that.columns[that.fieldsColumnsIndex[key]],
j = $.inArray(key, that.header.fields);
// Fix #142: search use formated data
if (column && column.searchFormatter) {
value = $.fn.bootstrapTable.utils.calculateObjectValue(column,
that.header.formatters[j], [value, item, i], value);
}
var index = $.inArray(key, that.header.fields);
if (index !== -1 && that.header.searchables[index] &&...