Jquery.Datatables 基本建立方法

 

基本建立

 

<!--定義操做列按鈕模板-->
<script id="tpl" type="text/x-handlebars-template">
    {{#each func}}
    <button type="button" class="btn btn-{{this.type}} btn-sm" onclick="{{this.fn}}">{{this.name}}</button>
    {{/each}}
</script>

<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">菜單管理</h1>
    </div>
</div>
<!-- /.col-lg-12 -->
<!-- /.row -->
<div class="row">
    <div class="col-lg-12">
        <div class="panel panel-primary">
            <div class="panel-heading">
                DataTable               
            </div>
            <!-- /.panel-heading -->
            <div class="panel-body">
                <div class="dataTable_wrapper">
                    <table id="dataTables-example" class="display" cellspacing="0" width="100%">
                        <thead>
                            <tr>
                                <th>Menu_ID</th>
                                <th>Menu_Code</th>
                                <th>Menu_ParentCode</th>
                                <th>Menu_Order</th>
                                <th>Menu_Name</th>
                                <th>Menu_Url</th>
                                <th>Menu_Icon</th>
                                <th>Menu_Enable</th>
                                <th>操做</th>
                            </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span
                        aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">新增</h4>
            </div>
            <div class="modal-body">
                <div class="form-group">
                    <input type="text" class="form-control" id="name" placeholder="姓名">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="position" placeholder="位置">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="salary" placeholder="薪資">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="start_date" placeholder="時間"
                        data-date-format="yyyy/mm/dd">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="office" placeholder="工做地點">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="extn" placeholder="編號">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-info" id="initData">添加模擬數據</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

<script>
    $("div.toolbar").html('<b style="color:red">自定義文字、圖片等等</b>');

    //建立datatables
    $('#dataTables-example').DataTable({
        //"autoWidth": true,//自適應寬度
        "jQueryUI": true,
        responsive: true,
        "processing": true,
        "bSort": false, //是否支持排序功能
        "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": " 最後一頁 "
            }
        }, //多語言配置
        //"ajax": '/Menu/LoadMenuList',
        "ajax": {
            "type": "post",
            "url": '/Menu/LoadMenuList',
        },
        columns: [
            { data: 'Menu_ID' },
            { data: 'Menu_Code' },
            { data: 'Menu_ParentCode' },
            { data: 'Menu_Order' },
            { data: 'Menu_Name' },
            { data: 'Menu_Url' },
            { data: 'Menu_Icon' },
            { data: 'Menu_Enable' },
            { data: null },
        ],
        //設置定義列的初始屬性
        "columnDefs": [{
            "targets": -1,//編輯
            "data": null,
            "defaultContent": "<button id='editrow' class='btn btn-primary' type='button'><i class='fa fa-edit'></i></button> " +
                "<button id='delrow' class='btn btn-primary' type='button'><i class='fa fa-trash-o'></i></button>"
        },

        ],
        //定義datables佈局
        "dom": "<'row'<'col-xs-2'l><'#mytool.col-xs-4'><'col-xs-6'f>r>" +
                    "t" +
                    "<'row'<'col-xs-6'i><'col-xs-6'p>>",
        //初始化結束後的回調函數
        initComplete: function () {
            $("#mytool").append('<button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">添加</button>');
            $("#datainit").on("click", initData);
        }
    });

    // 數據刪除
    $('#dataTables-example tbody').on('click', 'button#delrow', function () {
        var data = tables.row($(this).parents('tr')).data();
        $.ajax({
            url: 'deltable',
            type: 'POST',
            dataType: 'json',
            data: { id: data[0] },
        })
        .done(function (data) {
            if (data == "success") {
                tables.ajax.reload();
            };
        })
        .fail(function () {
            alert("error");
        });
    });

    // 數據編輯
    $('#dataTables-example tbody').on('click', 'button#editrow', function () {
        //var data = tables.row($(this).parents('tr')).data();
        //var fields = $("#add-form").serializeArray();
        //jQuery.each(fields, function (i, field) {
        //    //jquery根據name屬性查找
        //    $(":input[name='" + field.name + "']").val(data[i]);
        //});
        //$(":input[name='mark']").val("edit");
        $("#myModal").modal("show");//彈出框show

    });
</script>