【问题标题】:How to eliminate the empty rows from the jTable jQuery?如何从 jTable jQuery 中消除空行?
【发布时间】:2018-06-04 22:35:13
【问题描述】:

我的网页中有两个 jTable,它们从数据库加载数据。第一个 jTable 直接从数据库中获取数据,第二个表根据第一个表中选择的数据加载其数据。

我现在面临的问题是,如果没有要从特定选定行中为第二个表获取数据的情况下,这些行将显示为空。

例如,我在表1中选择了一个数据,但是由于没有与所选数据相关的数据,所以第二个表显示的是空行。

如果行甚至有一个条目我想显示该行,如何隐藏或不获取行是否同时完全为空。

我在后端使用 python 来获取数据。那么,我需要更改我的python 代码还是需要更改前端jQuery 或CSS。

我尝试过使用 jQuery,它没有按预期工作。

我的第一个 jTable 代码是:

$('#SelectCode').jtable({
    selecting: true,
    paging: true,
    actions: {
    listAction:// my back end connection here
    },
    fields: {
        codes: {
            title: 'Code',
        },
        name:{
          title: 'Name',
        },
    },
    selectionChanged: function () {
    var $selectedRows = $('#SelectCode').jtable('selectedRows');
        if ($selectedRows.length > 0) {
            $selectedRows.each(function () {
                var record = $(this).data('record');
                Code = record.event_codes;
               $('#System').jtable('load',{code:(SelectedCode)});

            });
    },
});

我的第二个 jTable 代码是:

    $('#System').jtable({
        selecting: true,
        paging: true,
        actions: {
            listAction:// my back end connection here
        },
        fields: {
            date:{
                title:'Date',
            },
            Time:{
              title:'Time'
            },
    },
});

那么,有人可以帮助我如何消除表格中的空行。

谢谢,

【问题讨论】:

    标签: javascript jquery jtable jquery-jtable


    【解决方案1】:

    我通过在我的 jTable 字段中添加以下代码行来实现它:

     display: function(data) {
                       if (data.record.date == null) {
                            $("#System tr").each(function() {
                            var cellText = $.trim($(this).text());
                            if (cellText.length == 0) {
                              $(this).hide();
                                }
                            });
                        }
                        return data.record.date;
                    },
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2014-08-28
      • 2011-12-22
      • 1970-01-01
      • 2019-03-08
      • 1970-01-01
      • 1970-01-01
      • 2016-11-28
      • 1970-01-01
      相关资源
      最近更新 更多