Using DataTable and Bootstrap I would like to have the search field in focus after page load. Unfortunately, I'm not able to achieve it. When the page is loaded and I refresh it, then the search field is in focus and I can start typing, I want to avoid refreshing and start typing right away when the page is loaded.
Below libraries:
<!-- // required CSS references -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.css" />
<!-- // required library references -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.js"></script>
I did try:
$(document).ready(function () {$(".dataTables_filter input[type='search']").attr("placeholder", "Type here").focus();});
or
initComplete: function ()
{$(".dataTables_filter input").attr("placeholder", "Search here...").css(
{width: "300px", display: "inline-block"}).focus();}});
or
$('#dtable_filter input').focus()$(window).on('focus', function ({$('#dtable_filter input')
But none of those works by page load, I have to refresh the loaded page so the input search field will be active/focused, so I can start typing. I'm using the latest version of Chrome 64-bit.
*Update: This behavior is repeatable when run Debugger in Vscode and in FileMaker when I load the page into Webviewer. Running html file itself works fine.
Thanks in advance for any suggestions.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Contacts Introduction</title>
<!-- // required CSS references -->
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.css" />
<!-- // required library references -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.2/js/bootstrap.bundle.min.js"></script>
<script type="text/javascript"
src="https://cdn.datatables.net/v/bs5/jq-3.6.0/dt-1.13.1/cr-1.6.1/fh-3.3.1/sp-2.1.0/datatables.min.js"></script>
</head>
<!------------------------------- BEGIN STYLE ------------------------>
<style>
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: "Roboto", sans-serif;
font-size: 9pt;
padding: 0;
width: 98.5vw;
}
.dataTables_wrapper {
padding: .8em;
overflow-x: hidden;
}
.dataTables_wrapper>div>div.dataTables_filter {
display: flex;
float: right;
}
.dataTables_wrapper>div>div.dataTables_length {
display: flex;
float: left;
margin: 0 0 1em 0;
margin-bottom: 1em;
width: 50%;
}
.dataTables_wrapper .dataTables_paginate {
display: flex;
justify-content: flex-end;
}
myTable {
width: 99%;
}
.dataTables_info {
background-color: gainsboro;
clear: both;
margin: 0 0 1em 0;
padding: 0.5rem 1rem;
border-bottom: gainsboro;
}
th {
font-size: x-small;
padding: 0.5rem 1.2rem 0.5rem 0.5rem !important;
vertical-align: middle;
}
th>select {
display: none;
}
th.sorting.sorting_asc {
font-size: 10pt;
}
th.sorting.sorting_desc {
font-size: 10pt;
}
th.sorting::before,
th.sorting::after {
display: none !important;
}
th.sorting[aria-sort="ascending"]::before,
th.sorting[aria-sort="ascending"]::after,
th.sorting[aria-sort="descending"]::before,
th.sorting[aria-sort="descending"]::after {
display: block !important;
}
th>td {
padding: 0.5rem !important;
}
tbody>tr>td {
border-bottom-width: 0 !important;
border-right-width: 0 !important;
padding: 0.5rem !important;
}
tbody>tr>td:last-of-type {
border-right-width: 1px !important;
}
table.dataTable.no-footer {
border-bottom: 1px solid gainsboro;
}
</style>
<!-------------------------------- END STYLE -------------------------->
<!-------------------------------- BEGIN BODY ------------------------>
<body>
<table id="dtable" class="table table-striped table-bordered table-sm" width="100%">
</table>
<script>
let myTable;
const data = [
{ "Company_Name": "Company1", "ID": "411A3531-0077-4706-9017-FB156D1DB841" },
{ "Company_Name": "Company11", "ID": "145698D4-C3B9-4368-B599-765D31ADD772" },
{ "Company_Name": "Company111", "ID": "2BEFAA4B-917A-4487-8B37-A9C3A398D3CB" },
{ "Company_Name": "Company11111 ", "ID": "AF41267E-5565-4F0F-9081-1665DAD88E58" },
{ "Company_Name": "Company111111.", "ID": "3AA9DD53-508A-4887-8579-D5FE4F53A9B1" },
{ "Company_Name": "Company111111111", "ID": "257DA4AA-30FA-4517-AC61-8B3DA5AAD88F" }
];
const columns = [
{
"data": "Company_Name",
"orderable": true,
"searchable": true,
"title": "COMPANY NAME",
"visible": true
}
];
myTable = $("#dtable").DataTable({
columns,
data,
searching: true,
lengthMenu: [[15, 20, 50, 100, -1], [15, 20, 50, 100, "All"]],
pageLength: 15,
fixedHeader: true,
lengthChange: true,
dom: "<fli> <t> <rp>",
});
$("#dtable").on("click", "td", function () {
const columns = myTable.settings().init().columns;
const cell = myTable.cell(this).data();
const obj = myTable.row(this).data();
const colIndex = myTable.cell(this).index().column;
const field = columns[colIndex].data;
const obj2 = JSON.stringify(obj);
});
$(document).ready(function () {
$(".dataTables_filter input[type='search']")
.attr("placeholder", "Type here")
.focus();
});
</script>
</body>
</html>