jquery datatable

最新推荐文章于 2021-09-15 18:23:44 发布

KingCruel

最新推荐文章于 2021-09-15 18:23:44 发布

阅读量874

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/KingCruel/article/details/50986357

版权

JavaScript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

jquery datatable

@{
    ViewBag.Title = "Test";
    Layout = "~/Areas/Administrator/Views/Shared/_Layout.cshtml";
}
<script type="text/javascript">
    $(document).ready(function () {
        LoadData();
    })

    function LoadData() {
        $('#example').DataTable({
            "sAjaxSource": "@Url.Action("GetPageList", "MemberManage")",
            "fnServerData": function (sSource, aDataSet, fnCallback) {
                $.ajax({
                    "dataType": 'json',
                    "type": "POST",
                    "url": sSource,
                    "data": { "pageIndex": "1", "pageSize": "20" },
                    "success": fnCallback
                });
            },
            "sPaginationType": "bootstrap", //分页样式   full_numbers
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_条",
                "sZeroRecords": "没有找到符合条件的数据",
                "sProcessing": "正在加载数据...",
                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
                "sInfoEmpty": "没有记录",
                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                "sSearch": "搜索：",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "前一页",
                    "sNext": "后一页",
                    "sLast": "尾页"
                }
            },
            "aoColumns": [{
                "mDataProp": "ID",
                "sTitle": "用户ID",
                "sDefaultContent": "", //此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
                "bVisible": true //此列不显示
            }, {
                "mDataProp": "UserName",
                "sTitle": "用户名",
                "sDefaultContent": "",
                "sClass": "center"
            }, {
                "mDataProp": null,
                "sClass": "center ",
                "fnRender": function () {
                    return '<span class="label-default label label-danger">Banned</span>';
                }
            }, {
                "mDataProp": null,
                "sClass": "center ",
                "fnRender": function (obj) {
                    return '<a class="btn btn-success" href="' + obj.aData.ID + '"><i class="glyphicon glyphicon-zoom-in icon-white"></i> View</a>' +
                        ' <a class="btn btn-info" href="' + obj.aData.ID + '"><i class="glyphicon glyphicon-edit icon-white"></i> Edit</a>' +
                        ' <a class="btn btn-danger" href="' + obj.aData.ID + '"><i class="glyphicon glyphicon-trash icon-white"></i> Delete</a>';
                }
            }],
        });
    }
</script>
<div id="content" class="col-lg-10 col-sm-10">
    <div>
        <ul class="breadcrumb">
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Tables</a>
            </li>
        </ul>
    </div>

    <div class="row">
        <div class="box col-md-12">
            <div class="box-inner">
                <div class="box-header well" data-original-title="">
                    <h2><i class="glyphicon glyphicon-user"></i>Datatable + Responsive</h2>
                    <div class="box-icon">
                        <a href="#" class="btn btn-setting btn-round btn-default"><i class="glyphicon glyphicon-cog"></i></a>
                        <a href="#" class="btn btn-minimize btn-round btn-default">
                            <i class="glyphicon glyphicon-chevron-up"></i>
                        </a>
                        <a href="#" class="btn btn-close btn-round btn-default"><i class="glyphicon glyphicon-remove"></i></a>
                    </div>
                </div>
                <div class="box-content">
                    <div class="alert alert-info">For help with such table please check <a href="http://datatables.net/" target="_blank">http://datatables.net/</a></div>
                    <table id="example" class="table table-striped table-bordered bootstrap-datatable responsive">
                        <thead>
                            <tr>
                                <th>ID</th>
                                <th>UserName</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>