如何从$()。DataTable()函数中获取当前页面?

时间:2019-01-25 16:05:45

标签: javascript jquery datatables asp.net-core-mvc asp.net-core-2.1

我正在使用ASP.Net Core 2.1 MVC Web应用程序,并且我将DataTables.Net数据表v1.10.19用于列表。

我正在创建主/明细细目,其中作业活动的第一个列表(DataTable)在每一行上提供指向相应明细记录的链接。我也在使用分页。

在详细记录上,我想要一个面包屑,将我带回到工作活动列表,并转到我当时所在的正确页码,然后单击详细信息链接。

我正在做的是将在作业活动数据表上使用的查询属性作为查询字符串参数传递到详细信息页面,以便我可以将面包屑URL正确地填充回作业活动页面。

我可以在DataTable.Net API reference上看到可以使用API​​使用page.info()来获取当前页面,例如:

var table = $('#example').DataTable();
var info = table.page.info();

$('#tableInfo').html(
    'Currently showing page '+(info.page+1)+' of '+info.pages+' pages.'
);

问题在于,我将DataTable初始化为表设置的一部分,并且在该函数的主体中,我在其中填充了详细页面的链接数据。我似乎无法执行两个.DataTable()调用,例如调用DataTable函数以获取页面信息以初始化pageNumber变量,然后调用main .DataTable函数,因为这会导致主DataTable的初始化功能失败。

因此,如果可能的话,我需要一种从主.Datatable()函数中获取当前页面的方法。

这是我的主要DataTable()函数;

    jQuery(document).ready(function($) {

        //Get the Timezone offset between local time and UTC
        var d = new Date();
        var m = d.getTimezoneOffset();
        var minutesToOffset = parseInt(m, 10);
        var companyId = $('#company-filter').val();
        var siteId = $('#site-filter').val();
        var aging = $('#aging-filter').val();

        console.log(`companyId: [${companyId}], siteId: [${siteId}], Aging Days: [${aging}]`);

        var table = $("#ssflist").DataTable({
            //"dom": "lrtip",
            "initComplete": function() {
                $('#spinner1').hide();
                $('#spinner2').hide();
            },
            "processing": true,
            "serverSide": true,
            "filter": true,
            "orderMulti": false,
            "order": [[6, "desc"]],
            "ajax": {
                "url": `/JobActivity/LoadData?companyId=${companyId}&siteId=${siteId}&agingDays=${aging}`,
                "type": "POST",
                "datatype": "json"
            },
            "oLanguage": {
                "sSearch": "Filter"
            },
            "columnDefs": [
                { "orderable": false, "targets": [9, 10] },
                { "className": "text-center", "targets": [0, 9, 10] },
                {
                    "targets": [6, 7],
                    "render": function(data) {
                        if (data != null) {
                            return moment(data).subtract(minutesToOffset, 'minutes').format('M/D/YYYY h:mm a');
                        }
                    }
                }
            ],
            "columns": [
                {
                    "render": function(data, type, full, meta) {
                        if (full.ManifestStatus === 0) {
                            return '<i class="far fa-clock text-primary" title="Not started"></i>';
                        } else if (full.ManifestStatus === 1) {
                            return '<i class="fas fa-sync-alt text-primary" title="Pending"></i>';
                        } else if (full.ManifestStatus === 2) {
                            return '<i class="far fa-file-alt text-primary" title="Manifested"></i>';
                        } else if (full.ManifestStatus === 3) {
                            return '<i class="far fa-times-circle text-danger" title="Failed"></i>';
                        } else if (full.ManifestStatus === 4) {
                            return '<i class="far fa-check-circle text-primary" title="Uploaded"></i>';
                        } else return '<i class="far fa-question-circle text-primary" title="Unknown status"></i>';
                    },
                    "name": "ManifestStatus"
                },
                {
                    "render": function(data, type, full, meta) {
                        if (type === 'display' && data != null) {
                            data =
                                `<a href="/shippingServicesFileDetail/detail?id=${full.Id
                                }&returnTitle=Job Activity List&companyId=${companyId}&siteId=${siteId}&agingDays=${
                                aging}">
                                                         <button type="button" class="btn btn-outline-primary btn-sm">` +
                                data +
                                `</button></a>`;
                        }
                        return data;
                    },
                    "data": "Id",
                    "name": "Id"
                },
                { "data": "TransactionId", "name": "TransactionId", "autoWidth": true, "defaultContent": "" },
                { "data": "CompanyName", "name": "CompanyName", "autoWidth": true, "defaultContent": "" },
                { "data": "SiteName", "name": "SiteName", "autoWidth": true, "defaultContent": "" },
                { "data": "ReferenceId", "name": "ReferenceId", "autoWidth": true, "defaultContent": "" },
                { "data": "CreatedDate", "name": "CreatedDate", "autoWidth": true, "defaultContent": "" },
                { "data": "UploadDate", "name": "UploadDate", "autoWidth": true, "defaultContent": "" },
                { "data": "Environment", "name": "Environment", "autoWidth": true, "defaultContent": "" },
                {
                    "render": function(data, type, full, meta) {

                        data = full.H1RecordCount + full.D1RecordCount + full.C1RecordCount;
                        return data;
                    },
                    "name": "Count"
                },
                {
                    "render": function(data, type, full, meta) {
                        if (full.AzureFileUrl != null) {
                            data =
                                `<a href="/JobActivity/getManifest?azureFileUrl=${full.AzureFileUrl
                                }&azureFileName=${full.AzureFileName}">
                                                        <i class="far fa-arrow-alt-circle-down text-primary" title="Download Manifest"></a>`;
                            return data;
                        } else {
                            return null;
                        }
                    },
                    "name": "AzureFileUrl"
                }
            ],
            // From StackOverflow http://stackoverflow.com/a/33377633/1988326 - hides pagination if only 1 page
            "preDrawCallback":
                function(settings) {
                    var api = new $.fn.dataTable.Api(settings);
                    var pagination = $(this)
                        .closest('.dataTables_wrapper')
                        .find('.dataTables_paginate');
                    pagination.toggle(api.page.info().pages > 1);
                },
        });

        $('#companyId').on('change',
            function() {
                table.search(this.text).draw();
            });
    });

相关的链接代码是...

data = `<a href="/shippingServicesFileDetail/detail?id=${full.Id                                   
}&returnTitle=Job Activity 
List&companyId=${companyId}&siteId=${siteId}&agingDays=${
aging}">

我想向此链接添加一个参数,该参数表示数据表的当前页面,以便我可以将其传递回详细信息页面上的痕迹链接,并使数据表转到正确的页面。

所以我需要一种从

内获取当前页面的方法
var table = $("#ssflist").DataTable({

函数本身,因此我可以在链接中将该值传递到详细信息页面。

Datatable函数中是否有可以获取当前页面值的属性或方法?

0 个答案:

没有答案