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

【问题标题】：DataTable does not apply style when called from ajax从 ajax 调用时，DataTable 不应用样式
【发布时间】：2018-06-19 13:10:16
【问题描述】：

我有一个基本的 SpringBoot 应用程序。使用 Spring Initializer、JPA、嵌入式 Tomcat、Thymeleaf 模板引擎，并打包为可执行 JAR 文件。我有一个使用 ajax 定义 2、1 的数据表，另一个没有 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 中我看到了这个

<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);
    });
});

结果相同

【问题讨论】：

你在哪里调用你的数据表？

标签： jquery css ajax datatables

【解决方案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');
               }
           }
    });

【讨论】：