How to navigate to a specific page on DataTable

aboni · June 2018

Hi, all. Is there a way to go to same specific page on DataTable, using a HREF link ?

colin · June 2018

Not with a HREF, as it's all within the single JS block, but you can use the DataTables API to navigate between pages - api -page()

Cheers,

Colin

bindrid · June 2018

Hi @aboni and @colin

Yes you can. I use the plugin at https://datatables.net/plug-ins/api/row().show() to jump to the appropriate page. I also make sure that each tr has a row id.

The url column contains a link that points back at itself and contains a row id. So, what ever row you click on what ever page, that should be were you end up when the page loads.

The data I used for this example was copied from https://www.datatables.net/examples/ajax/data/objects.txt

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4-4.0.0/dt-1.10.16/b-1.5.1/sl-1.2.5/datatables.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/v/bs4-4.0.0/dt-1.10.16/b-1.5.1/sl-1.2.5/datatables.min.js"></script>
    <script src="testdata.js"></script>
    <script>
        // this function is at https://datatables.net/plug-ins/api/row().show()
        $.fn.dataTable.Api.register('row().show()', function () {
            var page_info = this.table().page.info();
            // Get row index
            var new_row_index = this.index();
            // Row position
            var row_position = this.table().rows()[0].indexOf(new_row_index);
            // Already on right page ?
            if (row_position >= page_info.start && row_position < page_info.end) {
                // Return row object
                return this;
            }
            // Find page number
            var page_to_display = Math.floor(row_position / this.table().page.len());
            // Go to that page
            this.table().page(page_to_display);
            // Return row object
            return this;
        });

        $(document).ready(function () {
            var urlParams = getUrlVars();

            //mapping  creates a row id to be used in the datatable
            $.map(sampleData.data, function (item) { item.DT_RowId = "row_"+item.id; return item});
        
            $('#tbl').DataTable({
                "data": sampleData.data,
                "columns": [
                { "data": "name", "title": "Name" },
                { "data": "position", "title": "Position" },
                { "data": "office", "title": "Office" },
                { "data": "extn", "title": "Phone" },
                { "data": "start_date", "title": "Start Date" },
                { "data": "salary", "title": "Salary" },
                {
                    "data": null, "title": "url", render: function (data) {
                        return "<a href='datatablelink.html?rowid=" + data.id + "'>" + data.id + "</a>";
                    }
                }
                ],
                initComplete: function (settings) {
                    if (urlParams.rowid) {
                        var api = new $.fn.dataTable.Api(settings);
                        var row = api.row("#row_" + urlParams.rowid).show().draw(false);
                    }
                }
            });
        });

        //  turns url parameters into an object
        function getUrlVars() {
            var vars = {};
            var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
                vars[key] = value;
            });
            return vars;
        }
    </script>
</head>
<body>

    <div>
        <table id="tbl" class="table table-bordered table-striped"></table>
    </div>
</body>


</html>

How to navigate to a specific page on DataTable

How to navigate to a specific page on DataTable

Answers

Howdy, Stranger!

Categories

DataTables

How to navigate to a specific page on DataTable

How to navigate to a specific page on DataTable

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables