我正在处理引导表，这意味着它会呈现表本身。我试图让搜索输入变得有粘性，这样即使用户滚动，他仍然可以使用快速搜索功能，而无需重新滚动。
示例代码可在此处找到：https://live.bootstrap-table.com/example/options/table-search.html
代码本身是这样的：
<table
id="table"
data-toggle="table"
data-search="true"
data-url="json/data1.json">
<thead>
<tr>
<th data-field="id">ID</th>
<th data-field="name">Item Name</th>
<th data-field="price">Item Price</th>
</tr>
</thead>
</table>
我尝试过：
document.querySelector('body > div.bootstrap-table.bootstrap4 > div.fixed-table-toolbar > div').style.position = "sticky"
document.querySelector('body > div.bootstrap-table.bootstrap4 > div.fixed-table-toolbar > div').style.top = "0"
但它似乎不起作用。
我可能用一颗怪异的核武器杀死了一只蝴蝶，但由于我找不到方法"容易"；我手动克隆了输入并将其修复。然后手动检查原始搜索是否在视口之外，以便隐藏/显示它。并从原来的CSS中复制，使其看起来像是粘贴的。
以下是我的操作方法，此代码用于引导表搜索，但您可以将其用于任何输入，我尝试留下注释，以便您可以查看需要编辑的位置。
HTML:
将其添加到<body>标签内的任何位置
<div id="stickySeachDiv" class="position-fixed top-0 end-0" style="z-index: 100;">
<!-- sticky search will be added by script into this div -->
</div>
CSS:
根据填充复制搜索的属性，以创建粘性效果。隐藏只是在启动时会被隐藏，就像在我的情况下，原始输入出现在顶部一样
#stickySeachDiv {
padding-right: 2%;
display: none;
}
Javascript：
我正在使用自动提交搜索，你可以评论出来。别忘了也删除侦听器。此外，我从前bs调用了CreateStickySearch。。。你也可以修改它，window.onload也应该可以
$("#gamesTable").one("pre-body.bs.table", createStickySearch);
function createStickySearch() {
// get hold on the input and clone it
const OriginalSearch = document.querySelector(".fixed-table-toolbar .search input");
const stickySearch = OriginalSearch.cloneNode(true);
stickySearch.addEventListener("keyup", autoSearchHandler);
stickySearch.addEventListener("search", handleStickySearch);
document.querySelector("#stickySeachDiv").appendChild(stickySearch);
// jQuery Listeners, change if you don't use jquery
$(window).on("DOMContentLoaded load resize scroll", stickySearchListener);
}
let time;
function autoSearchHandler() {
// automaticly submit the search after given time
clearTimeout(time);
time = setTimeout(() => submitStickySearch(this.value), 500);
}
function handleStickySearch() {
submitStickySearch(this.value);
}
function submitStickySearch(text) {
$("#table").bootstrapTable("refreshOptions", {
searchText: text
});
}
function revealStickySearch() {
const originalSearch = document.querySelector(".fixed-table-toolbar .search input");
const stickySearchDiv = document.querySelector("#stickySeachDiv");
const stickySearchInput = stickySearchDiv.querySelector('input');
stickySearchDiv.style.display = "block";
stickySearchInput.value = originalSearch.value;
}
function hideStickySearch() {
document.querySelector("#stickySeachDiv").style.display = "none";
}
// Code to see when it should activate, credit to https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport
function isElementInViewport(el) {
// Special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <=
(window.innerHeight ||
document.documentElement.clientHeight) /* or $(window).height() */ &&
rect.right <=
(window.innerWidth ||
document.documentElement.clientWidth) /* or $(window).width() */
);
}
let old_visible = true;
function onVisibilityChange(el, onvisible, onNotvisible) {
var visible = isElementInViewport(el);
if(visible !== old_visible) {
old_visible = visible;
visible ? onvisible() : onNotvisible();
}
}
function stickySearchListener() {
const originalSearch = document.querySelector(".fixed-table-toolbar .search input");
onVisibilityChange(originalSearch, hideStickySearch, revealStickySearch);
}
这不是最漂亮的解决方案，但它有效，如果有人找到更优雅的解决方案我会编辑我的解决方案。
祝大家好运