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>