【问题标题】:Sortable bootstrap table with rails gem带有 rails gem 的可排序引导表
【发布时间】:2017-04-10 16:58:38
【问题描述】:

我正在使用bootstrap-table-rails gem 为我的表创建可排序功能。它工作正常,除非我通过 JS 更改表字段中的数据。 我的代码如下所示:

<table data-toggle="table" class="table table-responsive">
    <thead>
        <tr>
            <th data-field="date" data-sortable="true">TITLE</th>
            <th data-field="deadline" data-sortable="true">DEADLINE</th>
            <th data-field="accept-job" data-sortable="true"></th>
        </tr>
     </thead>
     <tbody>
         <tr>
             <td>Sample data</td>
             <td>Sample data</td>
             <td class="accept_field"><button class="btn accept_btn">Accept Job</button></td>
         </tr>
         <tr>
             <td>Sample data</td>
             <td>Sample data</td>
             <td>Sample data</td>
         </tr>
    </tbody>

这个表基本上包含两行,其中一个填充了虚拟数据,另一个填充了动态数据(deadline_field)。我通过 JS 更改数据是这样的:

function Timer(duration, display, deadline) {
    var timer = duration, hours, minutes, seconds;
    setInterval(function () {
        hours = parseInt((timer /3600)%24, 10)
        minutes = parseInt((timer / 60)%60, 10)
        seconds = parseInt(timer % 60, 10);

        hours = hours < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.text(hours + ":" + minutes + ":" + seconds);
        deadline.text(hours + ":" + minutes + ":" + seconds);
        --timer;
    }, 1000);
};

$(".accept-btn").click(function() {
    var twentyFourHours = 24 * 60 * 60;
    // Show timer element on page
    var display = $('.countdown').show();
    var deadline = $('.deadline_field');
    Timer(twentyFourHours, display, deadline);
});

此函数执行以下操作: 1. 从 24 小时开始计时。 2. 在其他页面和表格中显示截止日期deadline_field。它工作得很好,但是当我尝试对表进行排序时,deadline_field 值被更改为Sample data,即排序不再起作用。 非常感谢您对这个问题的任何想法,谢谢。

【问题讨论】:

    标签: jquery ruby-on-rails twitter-bootstrap


    【解决方案1】:

    经过数小时的研究,我决定改用 sorttable.js 插件,它对我来说很好用。

    【讨论】:

      猜你喜欢
      • 2013-06-08
      • 1970-01-01
      • 2011-01-08
      • 2016-12-19
      • 2013-07-10
      • 2023-03-13
      • 2019-07-07
      • 2015-01-09
      • 1970-01-01
      相关资源
      最近更新 更多