Bootstrap Table - swtor select2 demo
// Bootstrap Table - jsfiddle using sources from http://tinkeringtester.com/swtor to help answer https://github.com/wenzhixin/bootstrap-table/issues/#1998, with select2 bug
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>
<link rel="stylesheet" href="http://tinkeringtester.com/Includes/bootstrap/bootstrap.min.css">
<link rel="stylesheet" href="http://tinkeringtester.com/Includes/select2/select2.min.css">
<script src="http://tinkeringtester.com/Includes/bootstrapTable/bootstrap-table-en-US.min.js"></script>
<script src="http://tinkeringtester.com/Includes/select2/select2.min.js"></script>
<div class="container-fluid">
<div id="menu"></div>
<div class="page-header">
<ul class="list-unstyled">
<li><h2>Optimal Stat Distribution For All DPS Disciplines</h2></li>
</ul>
</div>
<div id="toolbar">
<select id="findfaction" class="form-control"><option></option></select>
<button id="clearsearch" class="btn btn-info"><span class="glyphicon glyphicon-eye-open"></span> Clear Search </button>
</div>
<div id="divTable">
<table id="main" class="table table-striped" data-filter-control="true">
<thead>
<tr>
<th></th>
<th><select id="findclass" class="form-control gosearch"><option>
a
</option></select></th>
<th><select id="finddisc" class="form-control gosearch"><option>a</option></select></th>
<th><select id="findlvl" class="form-control gosearch"><option>a</option></select></th>
<th>DPSaaa</th>
<th>APMaaa</th>
<th>Mastery</th>
<th>Power</th>
<th>Critical</th>
<th>Alacrity</th>
<th>Accuracy</th>
</tr>
</thead>
</table>
</div>
</div>
JavaScript
// Bootstrap Table - jsfiddle using sources from http://tinkeringtester.com/swtor to help answer https://github.com/wenzhixin/bootstrap-table/issues/#1998, with select2 bug
$(document).ready(function(){
//load menu
$('#menu').load('http://tinkeringtester.com/swtor/Includes/menu.html');
//initialize select2 dropdowns for table headers
$('#main').on('post-header.bs.table', function () {
$('#findclass').select2({
width: '100%',
placeholder: 'Class',
allowClear: true,
ajax: {
url: 'http://tinkeringtester.com/swtor/Includes/selectdpsclass.php',
dataType: 'json',
delay: 250,
data: function (params) {
$('#findclass').empty();
var d = new Date();
var n = d.getTime();
return {
q: params.term,
faction: $('#findfaction').text(),
n: n
};
},
processResults: function (data) {
return {
results: data
};
}
}
});
$('#finddisc').select2({
width: '100%',
placeholder: 'Discipline',
allowClear: true,
ajax: {
url: 'http://tinkeringtester.com/swtor/Includes/selectdpsdisc.php',
dataType: 'json',
delay: 250,
data: function (params) {
$('#finddisc').empty();
var d = new Date();
var n = d.getTime();
return {
q: params.term,
faction: $('#findfaction').text(),
class: $('#findclass').text(),
n: n
};
},
processResults: function (data) {
return {
results: data
};
}
}
});
$('#findlvl').select2({
width: '100%',
placeholder: 'Gear',
allowClear: true,
ajax: {
url:...