jQuery.dataTables.js插件的样式问题

Question

参考的博文：
[jQuery]jQuery DataTables插件自定义Ajax分页实现 - seayxu - 博客园
http://www.cnblogs.com/seayxu/p/5513907.html
使用的后台模板：
DataTables | Gentelella
https://colorlib.com/polygon/gentelella/tables_dynamic.html

就我的显示不正常

博文里的：

模板里的：

我的js：
//初始化表格
function initTable() {
table = $("#dataTable").dataTable({
language:lang, //提示信息
autoWidth: false, //禁用自动调整列宽
stripeClasses: ["odd", "even"], //为奇偶行加上样式，兼容不支持CSS伪类的场合
processing: true, //隐藏加载提示,自行处理
serverSide: true, //启用服务器端分页
searching: false, //原生搜索
orderMulti: false, //多列排序
ordering : false, //排序
order: [], //取消默认排序查询,否则复选框一列会出现小箭头
renderer: "bootstrap", //渲染样式：Bootstrap和jquery-ui
pagingType: "full_numbers", //分页样式：simple,simple_numbers,full,full_numbers
scrollY: "500px", //滚动条
scrollCollapse: "true",
columnDefs: [{
"targets": 'nosort', //列的样式名
"orderable": false //包含上样式名‘nosort’的禁止排序
}],
ajax: function (data, callback, settings) {

$.ajax({
type: "GET",
url: "getData",
cache: false, //禁用缓存
data: {
"page" : (data.start/data.length)+1,
"rows" : data.length,
},
dataType: "json",
success: function (result) {
//封装返回数据
var returnData = {};
returnData.draw = data.draw;
returnData.recordsTotal = result.totalRecords;
returnData.recordsFiltered = result.totalRecords;
returnData.data = result.list;//返回的数据列表
console.log(returnData);
callback(returnData);
}
});
},
//列表表头字段
columns: columns_arr
}).api();
}
我的html：
<!--数据表的内容-->

                     </thead>
                     <tbody>

                     </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--/数据表的内容-->

Answer 1

博文里的图片传错了。。。