dataTable改变分页样式及language参数使用

一、修改分页按钮内容

效果：

默认分页：

改变分页内容：

 

方法：

$('#example').dataTable( {
    "language": {
                "paginate": {
                    "next":       "  ",
                    "previous":   "  "
                },
            }
} );

修改language参数，改变“上页”和“下页”的文字内容，可以直接修改为“<”和“>”，但样式不够好看，这里采用图片替代方式。

文字内容采用空格符号代替，即“&nbsp;”（不能直接打空格，会显示不出来），再修改css样式：

.paginate_button.previous a{
    width: 6px;
    height: 11px;
    background: url(../images/newImages/projectlist/左.png) no-repeat center;
}
.paginate_button.next a{
    width: 6px;
    height: 11px;
    background: url(../images/newImages/projectlist/右.png) no-repeat center;
}

完成：

 

PS：language参数使用

1）直接修改内容，如上述修改分页文字，修改表格信息等

更多使用参考：https://blog.csdn.net/zxf1242652895/article/details/60574570

2）采用json文件，如

"language": {
               "url": "${base}/assets/plugins/datatables/cn.json",
                
}

 

二、通过pagingType参数修改分页样式

http://www.datatables.club/example/basic_init/alt_pagination.html

三、使用分页插件

http://www.datatables.club/plug-ins/pagination/

栗子：

$('#example').DataTable( {
            "sPaginationType": "extStyle",
        } );

效果：