代码之家 › 专栏 › 技术社区 › en Peris

从ajax调用时,datatable不应用样式

datatables ajax css jquery

en Peris · 技术社区 · 7 年前

我有一个基本的SpringBoot应用程序。使用Spring初始化器、JPA、嵌入式Tomcat、TybereleAF模板引擎和包作为可执行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 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);
    });
});

同样的结果

1 回复 | 直到 7 年前

Leonardo Henriques 7 年前

要在数据表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');
               }
           }
    });