Bootstrap Table - Filter control

1 - bootstrap-table-filter-control.markdown

Bootstrap Table - Filter control

Example of Bootstrap Table, with search, a column filter, data checkbox, an export

A Pen by webramin on CodePen.

License.

index.html

<div class="container">
	<h1>Bootstrap Table</h1>
	<p> Mémo pour les options du Bootstrap Table : <a href="http://bootstrap-table.wenzhixin.net.cn/documentation/">Bootstrap Table Documentation</a></p>
	<p>Eléments de Bootstrap Table utilisés : <a href="http://jsfiddle.net/wenyi/e3nk137y/3178/">Data Checkbox</a>, pour cocher les éléments à sélectionner, <a href="https://github.com/wenzhixin/bootstrap-table-examples/blob/master/extensions/filter-control.html">extension Filter control</a>, pour les filtres via les colonnes, <a href="https://github.com/kayalshri/tableExport.jquery.plugin">extension Data export</a> pour exporter</p>

	<div id="toolbar">
		<select class="form-control">
			<option value="">Export Basic</option>
			<option value="all">Export All</option>
			<option value="selected">Export Selected</option>
		</select>
	</div>

	<table id="table" data-toggle="table" data-search="true" data-filter-control="true" data-show-export="true" data-click-to-select="true" data-toolbar="#toolbar">
		<thead>
			<tr>
				<th data-field="state" data-checkbox="true"></th>
				<th data-field="prenom" data-filter-control="input" data-sortable="true">نام</th>
				<th data-field="date" data-filter-control="select" data-sortable="true">سال تولد</th>
				<th data-field="examen" data-filter-control="select" data-sortable="true">شماره سریال</th>
				<th data-field="note" data-sortable="true">Note</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td class="bs-checkbox "><input data-index="0" name="btSelectItem" type="checkbox"></td>
				<td>طیبه</td>
				<td>1372</td>
				<td>رودباری</td>
				<td>1</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="1" name="btSelectItem" type="checkbox"></td>
				<td>رضا</td>
				<td>1377</td>
				<td>رودباری</td>
				<td>2</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="2" name="btSelectItem" type="checkbox"></td>
				<td>رامین</td>
				<td>1382</td>
				<td>رودباری</td>
				<td>3</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="3" name="btSelectItem" type="checkbox"></td>
				<td>امید</td>
				<td>1383</td>
				<td>رودباری</td>
				<td>4</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="4" name="btSelectItem" type="checkbox"></td>
				<td>نیما</td>
				<td>1385</td>
				<td>رودباری</td>
				<td>5</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="5" name="btSelectItem" type="checkbox"></td>
				<td>شیوا</td>
				<td>1387</td>
				<td>رودباری</td>
				<td>6</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="6" name="btSelectItem" type="checkbox"></td>
				<td>ایلیا</td>
				<td>1394</td>
				<td>رودباری</td>
				<td>7</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="7" name="btSelectItem" type="checkbox"></td>
				<td>مانی</td>
				<td>1396</td>
				<td>رودباری</td>
				<td>8</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="8" name="btSelectItem" type="checkbox"></td>
				<td>نرگس</td>
				<td>1396</td>
				<td>رودباری</td>
				<td>9</td>
			</tr>
			<tr>
				<td class="bs-checkbox "><input data-index="9" name="btSelectItem" type="checkbox"></td>
				<td>ماهان</td>
				<td>1397</td>
				<td>ایمانی</td>
				<td>10</td>
			</tr>
		</tbody>
	</table>
</div>

script.js

//exporte les données sélectionnées
var $table = $("#table");
$(function () {
	$("#toolbar")
		.find("select")
		.change(function () {
			$table.bootstrapTable("refreshOptions", {
				exportDataType: $(this).val()
			});
		});
});

var trBoldBlue = $("table");

$(trBoldBlue).on("click", "tr", function () {
	$(this).toggleClass("bold-blue");
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/editable/bootstrap-table-editable.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/export/bootstrap-table-export.js"></script>
<script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.9.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>

style.css

.container {
	width: 1024px;
	/* 	width:720px; */
	padding: 2em;
}

.bold-blue {
	font-weight: bold;
	color: #0277bd;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.0/bootstrap-table.min.css" rel="stylesheet" />
<link href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css" rel="stylesheet" />

ایجاد جدول با گرفتن خروجی