简体   繁体   English

带轨道宝石的可分类引导表

[英]Sortable bootstrap table with rails gem

I'm using bootstrap-table-rails gem to create sortable ability to my table. 我正在使用bootstrap-table-rails gem为我的表创建可排序的功能。 It works fine except when I change data in table's field via JS. 除非我通过JS更改表字段中的数据,否则它工作正常。 My code looks like this: 我的代码如下所示:

<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>

Basically this table contains two rows, one of them is filled with dummy data, other is filled with dynamic data ( deadline_field ). 基本上,该表包含两行,其中一行填充有虚拟数据,另一行填充了动态数据( deadline_field )。 I change data via JS like this: 我通过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);
});

This function does the following: 1. It counts time from 24 hours. 此功能执行以下操作:1.从24小时开始计时。 2. It displays deadline on other page and in table, deadline_field . 2.它在其他页面上和deadline_field表中显示截止deadline_field It works just fine, but when I try to sort table, deadline_field value is being changed to Sample data , ie sort doesn't work no more. 它工作得很好,但是当我尝试对表进行排序时, deadline_field值已更改为Sample data ,即排序不再起作用。 I would highly appreciate any thoughts about this problem, thanks. 非常感谢您对此问题的任何想法,谢谢。

经过数小时的研究,我决定切换到sorttable.js插件,该插件对我来说效果很好。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 bootstrap datepicker rails gem不起作用 - bootstrap datepicker rails gem is not working 带Bootstrap可排序表的区分大小写的Tinysort - Case-sensitive Tinysort with Bootstrap sortable table Rails 3推荐的jQuery可排序表插件 - jQuery Sortable Table plugin for Rails 3 Recommendation jQuery可排序表未正确发布在轨道上 - jQuery sortable table not posting correctly on rails 安装bootstrap gem或yarn为rails 5.1或两者添加bootstrap - install bootstrap gem or yarn add bootstrap for rails 5.1 or both 创建具有固定标头和可调整大小列的响应式可排序引导表 - Creating a Responsive, Sortable Bootstrap Table with Fixed Headers and Resizable Columns Rails 3.1:未定义的 sortable_element 使用acts_as_list gem - 如何修复? - Rails 3.1: undefined sortable_element using acts_as_list gem - how to fix? jQuery ajax过滤Ruby on Rails应用程序中的可排序表 - jQuery ajax filters on a sortable table in a Ruby on Rails application 过滤结果下拉菜单不适用于Rails Bootstrap Forms GEM - Filter result drop down menu not working with Rails Bootstrap Forms GEM “ Bootstrap3 DateTimePicker” Gem中的Rails数据日期格式 - Rails data-date-format in “Bootstrap3 DateTimePicker” Gem
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM