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

我有一个基本的SpringBoot应用程序。使用Spring初始值设定项、JPA、嵌入式Tomcat、Thymeleaf模板引擎，并将包作为可执行JAR文件。 我有一个使用ajax定义的datatable 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>

问题来自另一个正在添加类的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);
    });
});

/*
进度条
*/
//进度条
功能进度（百分比，元素）{
var progressBarWidth=百分比+“%”；
如果（百分比15）和（百分比<50））{
元素.find（'div'）.addClass（“橙色条”）；
}否则{
元素.find（'div'）.addClass（“绿色条”）；
}
//无标签：
元素find（'div'）.animate（{width:progressBarWidth}，500）；
}
$（文档）.ready（函数（）{
$（'.progressBar'）。每个（函数（）{
变量条=$（此项）；
var max=$（this.attr（'id'）；
最大=最大子串（3）；
进度（最大，巴）；
});
});

---

同样的结果

要在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: ajaxUrl, 
           "columns": [

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

           ] 

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

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