Question

我有一个基本的SpringBoot应用程序。使用Spring Initializer，JPA，嵌入式Tomcat，Thymeleaf模板引擎并将其打包为可执行JAR文件。我有一个定义为2，1的使用ajax的数据表，另一个没有ajax的数据表：

    <table id="deviceEventTable" class="pure-table"  style="position: relative;">
    <thead>
        <tr>
           <th class="col_battery"><!-- BATTERY -->
                BATERIA
            </th>
            <th class="col_last_event"><!-- LAST EVENT -->
               HORA
            </th>

        </tr>
    </thead>
</table>                            

<table id="deviceEventTable2" class="pure-table"  style="position: relative;">
    <thead>
        <tr>
             <th class="col_battery"><!-- BATTERY -->
                BATERIA
            </th>
            <th class="col_last_event"><!-- LAST EVENT -->
               HORA
            </th>

        </tr>
    </thead>
    <tbody>
        <tr th:each="deviceEvent : ${deviceEvents}"  th:onclick="'window.location.href = \'' + @{/deviceevent/{id}(id=${deviceEvent.id})} + '\''"   >
            <td class="col_battery"><!-- BATTERY -->
                <div class="progressBar" id="max20"><div></div></div><!-- bar % (Change ID maxnumber)-->
            </td>
            <td class="col_last_event"  ></td>
            <!-- LAST EVENT -->
        </tr>
    </tbody>
</table>

我在电池中看到了

<td class="col_battery"><!-- BATTERY -->
                                            <div class="progressBar" id="max20"><div></div></div><!-- bar % (Change ID maxnumber)-->
                                        </td>

这正是我从ajax调用中得到的结果，但是结果却不同：在1中应用了样式，但在ajax中没有应用样式。

在这里调用表：

$(document).ready(function() {

    $.fn.dataTable.ext.errMode = 'throw';

    var ajaxUrl = /*[[@{/api/users/{user}/datatableList(user=${#authentication.principal.id})}]]*/ ""

    var table = $('#deviceEventTable').DataTable( {
        order: [[ 0, "desc" ]],
        select: true,
        bLengthChange: false,
        stateSave: true,
        pageLength: 20,
        ajax: ajaxUrl, 
           "columns": [

               { data: 'battery' },
               { data: 'dateTime' }

           ] 
    });

    setInterval( function () {
        table.ajax.reload( null, false ); // user paging is not reset on reload
    }, 2000 );


    table.on('select.dt deselect.dt', function() {
          localStorage.setItem( 'DataTables_selected', table.rows( { selected: true }).toArray() )   
    })




    var table = $('#deviceEventTable2').dataTable( {
        order: [[ 0, "desc" ]],
        select: true,
        bLengthChange: false,
        stateSave: true,
        pageLength: 20,
        initComplete: function() {
            var api = this.api();

            if (localStorage.getItem( 'DataTables_selected' )!=null && localStorage.getItem( 'DataTables_selected' ) != 'undefined') {          
                var selected = localStorage.getItem( 'DataTables_selected' ).split(',');
                //var selected = '0';
                selected.forEach(function(s) {
                api.row(s).select();
                })
            }

          } 
    });


} );

/*]]>*/
</script>

我已更改为

ajax: ajaxUrl, 
           "columns": [

               { data: 'battery', className: "col_battery" },
               { data: 'dateTime' }

           ]

问题来自另一个添加类的js：

/* 
PROGRESS BAR
*/
// Progres Bar
function progress(percent, element) {
    var progressBarWidth = percent + '%';
        if(percent <= 15){
            element.find('div').addClass("red_bar");
        }else if((percent >15) && (percent < 50)){
            element.find('div').addClass("orange_bar");
        }else{
            element.find('div').addClass("green_bar");
        }
    // Without labels:
    element.find('div').animate({ width: progressBarWidth }, 500);
}

$(document).ready(function() { 
    $('.progressBar').each(function() { 
        var bar = $(this);
        var max = $(this).attr('id');
        max = max.substring(3);
        progress(max, bar);
    });
});

结果相同

Answer 1

要为Datatable Ajax中的列设置样式，必须使用columns.createdCell。但是，如果您只想向该列添加类，则使用className。如果您想对特定行进行任何操作，也可以使用createdRow。

var table = $('#deviceEventTable').DataTable( {
        order: [[ 0, "desc" ]],
        select: true,
        bLengthChange: false,
        stateSave: true,
        pageLength: 20,
        ajax: ajaxUrl, 
           "columns": [

               { 
                 data: 'battery',
                 className: 'col_battery',
                 createdCell: function (td, cellData, rowData, row, col) {
                        //Your js here.
                        $(td).css('color', 'red');
                }
               },
               { data: 'dateTime' }
           ],
           createdRow: function (row, data, dataIndex) {
               if (data[4] == "A") {
                  $(row).addClass('important');
               }
           }
    });

从ajax调用时，DataTable不应用样式

1 个答案: