jqurey datatable tableTools 自定义button元素 以及mRender 、FnRender不起作用问题
自定义button元素 以及按钮定义事件
版本 1.10.4
"dom": 'T<"clear">lfrtip', "tableTools": { //"sSwfPath": "~/Resources/Scripts/plugins/DataTables/swf/copy_csv_xls_pdf.swf" "sRowSelect": "multi", "aButtons": [ //{ "sExtends": "new_record", "sButtonText": "Add" }, { "sExtends": "select", "sButtonText": "Delete Recods", "fnClick": function (nButton, oConfig, oFlash) { //delete stuff comes here alert('test'); } } ] }
全部代码：
@Styles.Render("~/bundles/css/datatable") @*<script src="~/Resources/Scripts/plugins/DataTables/js/dataTables.tableTools.js"></script> <link href="~/Resources/Scripts/plugins/DataTables/css/data-table.css" rel="stylesheet" />*@ <div> <ol class="breadcrumb pull-right"> @if (ViewBag.Breadcrumbs != null) { var dict = ViewBag.Breadcrumbs as Dictionary<string, string[]>; foreach (var dictItem in dict) { if (dictItem.Value == null) { <li class="active">@dictItem.Key</li> } else { <li>@Ajax.ActionLink(dictItem.Key, dictItem.Value[1], dictItem.Value[0], new AjaxOptions { UpdateTargetId = "content" })</li> } } } </ol> <h1 class="page-header"> @*<small>操作日志管理</small>*@ </h1> </div> <div class="row"> <!-- begin col-12 --> <div class="col-md-12 ui-sortable"> <!-- begin panel --> <div class="panel panel-inverse"> <div class="panel-heading"> <div class="panel-heading-btn"> <!----工具栏---> <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-default" data-click="panel-expand" data-original-title="" title=""><i class="fa fa-expand"></i></a> <a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-success" data-click="panel-reload" data-original-title="" title=""><i class="fa fa-repeat"></i></a> @*<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-warning" data-click="panel-collapse"><i class="fa fa-minus"></i></a>*@ @*<a href="javascript:;" class="btn btn-xs btn-icon btn-circle btn-danger" data-click="panel-remove"><i class="fa fa-times"></i></a>*@ </div> <h4 class="panel-title"> 查看账户<button type="button" class="btn btn-success btn-xs" style="margin-left:20px"><i class="fa fa-plus"></i> 添加账户</button> </h4> </div> <div class="panel-body"> <!--------------------表头开始-------------------> <div class="table-responsive"> <div id="data-table_wrapper" class="dataTables_wrapper no-footer"> <table id="data-table" class="table table-striped table-bordered dataTable no-footer" role="grid" aria-describedby="data-table_info"> <thead> <tr><th>ID</th><th>内容</th><th>时间</th><th>类别</th><th>域</th><th>用户名</th><th>操作</th></tr> </thead> </table> </div> </div> <!--------------------表头结束-------------------> </div> </div> <!-- end panel --> </div> <!-- end col-12 --> </div> @Scripts.Render("~/bundles/DataTable/js") <script> //datatable 开始 $(document).ready(function () { handlePanelAction(); $('#data-table').dataTable({ "oLanguage": { "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "没有检索到数据", "sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据", "sInfoEmpty": "没有数据", "sInfoFiltered": "(从 _MAX_ 条数据中检索)", "sSearch": "查找账户", "oPaginate": { "sFirst": "首页", "sPrevious": "前一页", "sNext": "后一页", "sLast": "尾页" } }, "sServerMethod": "POST", "sAjaxSource": "@Url.Action("GetAllLog")", "bServerSide": true, "sPaginationType": "full_numbers", "aoColumns": [{ "mData": "ID", "sDefaultContent": "", "bVisible": false }, { "mData": "Content", "mRender": function (data, type, full) { //插件固定参数 data:mData接受的数据 full:全部json if (data.length > 20) { data = data.substring(0, 20) + "..."; } return "<a href='javascript:void(0)' onclick='myonclick(" + full.ID + ")'>" + data + "</a>" } }, { "mData": "CreateTime", "sDefaultContent": "", "sClass": "center", }, { "mData": "Category", "sDefaultContent": "", "sClass": "center" }, { "mData": "DomainID", "sDefaultContent": "", "sClass": "center" }, { "mData": "AccountName", "sDefaultContent": "", "sClass": "center" }, { //删除 "mData": "ID", "sDefaultContent": "", "sClass": "center", "mRender": function (data, type, full) { //插件固定参数 data:mData接受的数据 full:全部json return "<button class='btn btn-danger' onclick='deleteData(" + data + ")'>删除</button>"; } }], "columnDefs": [{ "bSortable": false, "aTargets": [2, 3, 4, 5, 6] }], "dom": 'T<"clear">lfrtip', "tableTools": { //"sSwfPath": "~/Resources/Scripts/plugins/DataTables/swf/copy_csv_xls_pdf.swf" "sRowSelect": "multi", "aButtons": [ //{ "sExtends": "new_record", "sButtonText": "Add" }, { "sExtends": "select", "sButtonText": "Delete Recods", "fnClick": function (nButton, oConfig, oFlash) { //delete stuff comes here alert('test'); } } ] } }); }); //datatable 结束 function myconfirm() { return confirm("您确定？"); }; function deleteData(id) { if (confirm("确定删除？")) { alert("删除成功 " + id); } else { } } function myonclick(id) { $.ajax({ url: "/LogManager/LogInfo?log_id=" + id, cache: false, success: function (html) { $("#content").html(""); $("#content").append(html); } }); }; </script> @*<script type="text/javascript" language="javascript" class="init"> $(document).ready(function () { var t = $('#data-table').DataTable(); var counter = 1; $('#addRow').on('click', function () { t.row.add([ counter + '.1', '<input type="button" value="button"/>', '<a href="xxx">超链接</a>', counter + '.4', counter + '.5' ]).draw(); counter++; }); // Automatically add a first row of data $('#addRow').click(); }); </script>*@
mRender FnRender 不起作用问题
错误用法：
1 "fnRender":fuction(obj){}
后来发现是版本的问题，改为mRender
正确用法：
“mRender”:fuction(data,type,full) { //data 是mdata接受的数据 full 是完整的json }
