Set focus in search field after page load

markIT

I would like to have focus in the search field after page is loaded for the first time. Unfortunately I can't make it happen, it works after page reload, but that's not the case. I need to have the first-page load. Can someone help me?

Im using:
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/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.1.3/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>

and my body looks like:

<script>

    let myTable;

    const data = [
        { "Company_Name": "Company1", "ID": "411A3531-0077-4706-9017-FB156D1DB841" },
        { "Company_Name": "Company2", "ID": "145698D4-C3B9-4368-B599-765D31ADD772" },
        { "Company_Name": "Company3", "ID": "2BEFAA4B-917A-4487-8B37-A9C3A398D3CB" },
        { "Company_Name": "Company4", "ID": "AF41267E-5565-4F0F-9081-1665DAD88E58" },
        { "Company_Name": "Company5", "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, // Feature control search (filtering) abilities
        lengthMenu: [[15, 20, 50, 100, -1], [15, 20, 50, 100, "All"]], // default menu options for drop down
        pageLength: 15,  // default # of items to show
        fixedHeader: true,
        lengthChange: true, // Feature control the end user's ability to change the paging display length of the table.
        dom: "<fli> <t> <rp>",  // Define the table control elements to appear on the page and in what ordermen
    });


    $("#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);

    });


</script>

I did test for example:

OR

window.addEventListener('DOMContentLoaded', function() { var searchInput = $('#dtable_filter input[type="search"]'); searchInput.attr('placeholder', 'Type to filter...'); searchInput.focus(); });

but each works only after the manual page reloads, not for the first page load.

Thanks in advance for any suggestions.

kthorngren

but each works only after the manual page reloads, not for the first page load.

Place your code in initComplete. This way the code executes after the search input filter is created by Datatables.

If you sill need help then please provide a simple test case showing what you are trying to do.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin