bootstrap datatable使用详解

<!--CDN 当您只需要包含Bootstrap Table的已编译CSS或JS时，您可以使用UNPKG.-->
<link rel="stylesheet"href="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.css">
<script src="https://unpkg.com/bootstrap-table@1.15.3/dist/bootstrap-table.min.js"></script>


var table = null;
$(document).ready(function() {
    table =  $(‘#whhtable’).DataTable({
        "bProcessing": true,//显示正在处理
        "bServerSide": true,//延迟加载
        "bScrollCollapse": false,  //当显示的数据不足以支撑表格的默认的高度时，依然显示纵向的滚动条。(默认是false)
        "bPaginate": true,  //是否显示分页
        "bLengthChange": true,  //每页显示的记录数
        "bFilter": true, //搜索栏
        "bAutoWidth": false,//自动计算表格各列宽度
        "bSort": true, //是否支持排序功能
        "bInfo": true, //显示表格信息
        "bAutoWidth": false,  //自适应宽度
        "aaSorting": [[1, "asc"]],  //给列表排序 ，第一个参数表示数组 (由0开始)。1 表示Browser列。第二个参数为 desc或是asc
        "fnServerData": retrieveData,//用于替换默认发到服务端的请求操作
        "iDisplayLength": 10,//用于指定一屏显示的条数，需开启分页器
        "sPaginationType": "bootstrap",//用于指定分页器风格
        "aoColumns": [
            {
                "bSortable": false, //不排序
                "bSearchable": false, //不参与搜索
            },
            {
                "bSortable": false,
                "bSearchable": true,
            },
            {
                "bSortable": false,
                "bSearchable": false,
            },
            {
                "bSortable": false,
                "bSearchable": false,
            },
            {
                "bSortable": false,
                "bSearchable": false,
            }
        ], //列设置，表有几列，数组就有几项
        "bStateSave": true, //保存状态到cookie ***** 很重要 ， 当搜索的时候页面一刷新会导致搜索的消失。使用这个属性就可避免了
        "sPaginationType": "full_numbers", //分页，一共两种样式，full_numbers和two_button(默认)
        "oLanguage": {
            "sLengthMenu": "每页显示 MENU 条记录",
            "sZeroRecords": "对不起，查询不到任何相关数据",
            "sInfo": "当前显示 START 到 END 条，共 TOTAL 条记录",
            "sInfoEmtpy": "找不到相关数据",
            "sInfoFiltered": "数据表中共为 MAX 条记录)",
            "sProcessing": "正在加载中…",
            "sSearch": "搜索",
            "sUrl": "", //多语言配置文件，可将oLanguage的设置放在一个txt文件中，例：Javascript/datatable/dtCH.txt
            "oPaginate": {
                "sFirst":    "第一页",
                "sPrevious": " 上一页 ",
                "sNext":     " 下一页 ",
                "sLast":     " 最后一页 "
            }
        },
        "bJQueryUI": false, //可以添加 jqury的ui theme  需要添加css
        "aLengthMenu": [[10, 25, 50, 100], ["每页10条", "每页25条","每页50条", "显示所有数据"]],  //设置每页显示记录的下拉菜单，如果不设置会有默认的[10,25,50,100]
        "columnDefs": [
            { "targets":0,"data": "id" },
            { "targets":1,"data": "type" },
            { "targets":2,"data": "note" },
            { "targets":3,"data": "status" },
            {
                "targets":4,
                "data": null,
                "defaultContent": "修改"
            }
        ]
    });
});


    var hdsjt = $('#hdsjt').DataTable({
    "bProcessing":false,
    "bFilter" : true,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "bSort": true,
    "aaSorting": [[2, "desc"]],
    "oLanguage": language,
    "sAjaxSource": "hdsjLoad.action?stime=" + s1 + "&etime=" + s2 + "&phones=" + s3 ,
    "aoColumns":[
        {"mData": "selfNumber"},
        {"mData": "otherNumber"},
        {"mData": "property"},
        {"mData": "time"},
        {"mData": "no"},
    ],
    "aoColumnDefs": [{ "bSortable": f;;;;
    lse, "aTargets": [0,1,4]}],//表格的第一二五列不使用排序风格
    x
    "aaSorting": [[2, "desc"],[3, "desc"]]
    });

————————————————

安装
通过npm或Bower包含Bootstrap Table源CSS和JavaScript文件。

npm install bootstrap-table
bower install bootstrap-table

基于原博主文章，添加代码块、字符缩进、排版优化；

版权声明：本文为CSDN博主「九指码农」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_14950717/article/details/53521479