使用Moment.js + jQuery Datatables w / pagination来本地化Unix时间值

时间:2017-02-02 12:05:03

标签: pagination datatables momentjs

我正在使用moment.jsjquery datatables。具体来说,我有一个包含Unix时间戳的单元格列表。

我想要做的是将此时间戳转换为用户的本地化时间(基于他/她的时区)。

我能够获得本地化的时区,但它只适用于我的表中的第一组分页结果...如果我导航到另一个页面,时间戳仍显示为原始的unix值。

我做了JS fiddle来说明。

有人可以让我知道1)如果有更好的方法来做我正在做的事情2)我怎样才能本地化我的时间,即使在a)搜索表2)排序表3)分页后的行动?

提前非常感谢!

我的JS:

// Do Datatables
$('.my-datatable').DataTable({
    "order": [[ 1, 'desc' ],],
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [ 0 ] } 
    ]
});

// Loop through class to localize unix time based on user's time zone
function localizeTime(){
    $( ".localize_time" ).each(function() {
        if (typeof moment !== 'undefined' && $.isFunction(moment)) {
            var userMomentTz         = moment().format("Z");
            var userTimeZone         = userMomentTz.replace(":", "");
            var elementSiteUnixTimeText  = $(this).find('.localize_time_unix').text();
            var elementSiteUnixTimeVal   = parseInt(elementSiteUnixTimeText.trim());
            if (userTimeZone.substring(0, 1) == "-") {
                var userTimeZoneHr  = parseInt(userTimeZone.substring(1,3));
                var userTimeZoneMin = parseInt(userTimeZone.slice(-2));
                var userTimeOffset  = (userTimeZoneHr + '.' + (userTimeZoneMin/60))*(-1);
            } else {
                var userTimeZoneHr = parseInt(userTimeZone.substring(0,2));
                var userTimeZoneMin = parseInt(userTimeZone.slice(-2));
                var userTimeOffset  = userTimeZoneHr + '.' + (userTimeZoneMin/60);
            }
            var momentDateUserOffset = moment.unix(elementSiteUnixTimeVal).utcOffset(userTimeOffset);
            var momentDateFormattedOffset = moment(momentDateUserOffset).format('ddd, D MMM YYYY, h:mm A');
            $(this).find('.localize_time_display').text(momentDateFormattedOffset);
        };
    });
};

// Run time localization function
if ( $( ".localize_time" ).length ) {
    localizeTime()
};

我的HTML

<table class="my-datatable">
    <thead>
        <tr>
            <th>Time</th>
            <th>Stuff</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stuff</td>
            <td>
                <span class="localize_time">
                    <span class="localize_time_unix">UNIX Time n++</span>
                    <span class="localize_time_display"></span>
                </span>
            </td>
        </tr>
    </tbody>
</table>

1 个答案:

答案 0 :(得分:1)

好的,幸运的是,这比我想象的'data rendering'

更容易

工作JS Fiddle

希望这有助于某人!

我更新的JS

// Do Datatables
$('.my-datatable').DataTable( {
    "order": [[ 1, 'desc' ],],
    "columnDefs": [{
    "targets": 1,
        "render": function (data, type, full, meta) {
            if (typeof moment !== 'undefined' && $.isFunction(moment)) {
                var userMomentTz         = moment().format("Z");
                var userTimeZone         = userMomentTz.replace(":", "");
                var elementSiteUnixTimeText  = data;
                var elementSiteUnixTimeVal   = parseInt(elementSiteUnixTimeText.trim());
                if (userTimeZone.substring(0, 1) == "-") {
                    var userTimeZoneHr  = parseInt(userTimeZone.substring(1,3));
                    var userTimeZoneMin = parseInt(userTimeZone.slice(-2));
                    var userTimeOffset  = (userTimeZoneHr + '.' + (userTimeZoneMin/60))*(-1);
                } else {
                    var userTimeZoneHr = parseInt(userTimeZone.substring(0,2));
                    var userTimeZoneMin = parseInt(userTimeZone.slice(-2));
                    var userTimeOffset  = userTimeZoneHr + '.' + (userTimeZoneMin/60);
                }
                var momentDateUserOffset = moment.unix(elementSiteUnixTimeVal).utcOffset(userTimeOffset);
                var momentDateFormattedOffset = moment(momentDateUserOffset).format('ddd, D MMM YYYY, h:mm A');
                $(this).find('.localize_time_display').text(momentDateFormattedOffset);
                return momentDateFormattedOffset;
            }; 
        }
    }]
} );