我的目标是对齐所有下拉菜单。但是,由于标签文本不同,下拉菜单未对齐。例如(来自我下面的代码)因为标签“位置测试 1”的文本较长,下拉菜单与“名称”下拉菜单不对齐。
有没有办法不管标签文本如何对齐它们?在此处查看预期结果屏幕截图 -
这是我的代码。
$(document).ready(function() {
$('#table-wrap').hide();
var table = $('#example').DataTable({
responsive: true,
mark: true,
stateSave: false,
searching: true
});
buildSelect(table);
$('#table-filter').on('change', function() {
// show the tbody when the user clicks on a filter option
$('#table-wrap').show();
table.columns.adjust();
table.search(this.value).draw();
});
table.on('draw', function() {
buildSelect(table);
});
$('#test').on('click', function() {
table.search('').columns().search('').draw();
$('#table-wrap').hide();
});
selectDisable();
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}
$(document).on('change', '#dd1', function() {
$('#dd2, #dd3').prop("disabled", false);
})
$(document).on('click', '#test', function() {
selectDisable();
})
function selectDisable() {
$('#dd2, #dd3').prop("disabled", true);
}
select {
width: 30%;
}
.form-group {
display: flex;
flex-direction: column;
justify-content: center;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox" select id="table-filter">
<div class="form-group">
<p><label for="dd1">Name:</label> <span id="dropdown1" input type="checkbox">
</span>
</p>
<p><label for="dd2">Postion Test1:</label> <span id="dropdown2">
</span>
</p>
<p><label for="dd3">Office:</label> <span id="dropdown3">
</span>
</p></div>
<button type="button" id="test">Clear Filters</button>
</div>
<div id="table-wrap">
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
</div>
你的意思是这样的吗?
$(document).ready(function() {
$('#table-wrap').hide();
var table = $('#example').DataTable({
responsive: true,
mark: true,
stateSave: false,
searching: true
});
buildSelect(table);
$('#table-filter').on('change', function() {
// show the tbody when the user clicks on a filter option
$('#table-wrap').show();
table.columns.adjust();
table.search(this.value).draw();
});
table.on('draw', function() {
buildSelect(table);
});
$('#test').on('click', function() {
table.search('').columns().search('').draw();
$('#table-wrap').hide();
});
selectDisable();
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}
$(document).on('change', '#dd1', function() {
$('#dd2, #dd3').prop("disabled", false);
})
$(document).on('click', '#test', function() {
selectDisable();
})
function selectDisable() {
$('#dd2, #dd3').prop("disabled", true);
}
.form-group {
display: flex;
flex-direction: column;
justify-content: center;
}
p {
display: flex;
width: 40%;
}
label {
display: flex;
flex: 1;
}
span, select {
display: flex;
flex: 1;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox" select id="table-filter">
<div class="form-group">
<p><label for="dd1">Name:</label> <span id="dropdown1" input type="checkbox">
</span>
</p>
<p><label for="dd2">Postion Test1:</label> <span id="dropdown2">
</span>
</p>
<p><label for="dd3">Office:</label> <span id="dropdown3">
</span>
</p></div>
<button type="button" id="test">Clear Filters</button>
</div>
<div id="table-wrap">
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
</div>
最简单的解决方法是为标签元素添加宽度或最小宽度,确保它与最长的标签一样宽。 WebPrograme 使用
flex
发布的另一个修复是更好的修复。 :)
.form-group > p > label {
display: inline-block;
min-width: 120px;
}
$(document).ready(function() {
$('#table-wrap').hide();
var table = $('#example').DataTable({
responsive: true,
mark: true,
stateSave: false,
searching: true
});
buildSelect(table);
$('#table-filter').on('change', function() {
// show the tbody when the user clicks on a filter option
$('#table-wrap').show();
table.columns.adjust();
table.search(this.value).draw();
});
table.on('draw', function() {
buildSelect(table);
});
$('#test').on('click', function() {
table.search('').columns().search('').draw();
$('#table-wrap').hide();
});
selectDisable();
});
function buildSelect(table) {
var counter = 0;
table.columns([0, 1, 2]).every(function() {
var column = table.column(this, {
search: 'applied'
});
counter++;
var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
.appendTo($('#dropdown' + counter).empty())
.on('change', function() {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');
});
// The rebuild will clear the exisiting select, so it needs to be repopulated
var currSearch = column.search();
if (currSearch) {
// Use RegEx to find the selected value from the unique values of the column.
// This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
}
});
}
$(document).on('change', '#dd1', function() {
$('#dd2, #dd3').prop("disabled", false);
})
$(document).on('click', '#test', function() {
selectDisable();
})
function selectDisable() {
$('#dd2, #dd3').prop("disabled", true);
}
select {
width: 30%;
}
.form-group {
display: flex;
flex-direction: column;
justify-content: center;
}
.form-group > p > label {
display: inline-block;
min-width: 120px;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<meta charset=utf-8 />
<title>DataTables - JS Bin</title>
</head>
<div class="searchbox" select id="table-filter">
<div class="form-group">
<p><label for="dd1">Name:</label> <span id="dropdown1" input type="checkbox">
</span>
</p>
<p><label for="dd2">Postion Test1:</label> <span id="dropdown2">
</span>
</p>
<p><label for="dd3">Office:</label> <span id="dropdown3">
</span>
</p></div>
<button type="button" id="test">Clear Filters</button>
</div>
<div id="table-wrap">
<table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;">
<thead>
<tr>
<th> </th>
<th> </th>
<th> </th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>ID.AI</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett -2</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton.1 -2</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
</tbody>
</table>
</div>