jqurey datatable tableTools 自定义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>*@
jqurey datatable tableTools 自定义button元素 以及按钮定义事件的更多相关文章
- jqurey datatable tableTools 自定义button元素 以及按钮自事件
版本 1.10.4 "dom": 'T<"clear">lfrtip', "tableTools": { //"sSw ...
- Android开发学习笔记--给一个按钮定义事件
学习Android的第一天,了解了各种布局,然后自己动手画出了一个按钮,然后给按钮定义了一个事件是弹出一条消息显示“我成功了!”字样,具体过程如下: 1.修改布局文件activity_main.xml ...
- 自定义button上传按钮
<div class="upload_files"> <input type="file" class="upload_icon&q ...
- button元素兼容问题浅析
缺省type属性值 <button>提交</button> button元素的type属性值有submit.button可选,在上面这种没有明确指出type值的情况下,浏览器的 ...
- input 和 button元素 作为提交、重置、按钮功用的区别。
首先,input元素和button元素 都是可以作为普通按钮.提交按钮.重置按钮的. <input type="button" value="button" ...
- Android 自定义Button按钮显示样式(正常、按下、获取焦点)
现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...
- dataTable之自定义按钮实现全表 复制 打印 导出 重载
//本文对常用表格插件datatable 的自定义按钮功能键进行详细解释//其中 15-78行是定义表单//16 18 19 三行定义自定义功能按钮 实现对全表的 复制 打印 导出(csv即excel ...
- C#自定义Button按钮控件
C#自定义Button按钮控件 在实际项目开发中经常可以遇到.net自带控件并不一定可以满足需要,因此需要自定义开发一些新的控件,自定义控件的办法也有多种,可以自己绘制线条颜色图形等进行重绘,也可以采 ...
- WPF 自定义Button控件及样式
这次通过最近做的小例子说明一下自定义Button控件和样式. 实现的效果为:
随机推荐
- Struts09---验证框架
01.创建登录界面 <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- Nodejs-cli 填坑记
真的是玩玩没想到,一个cli竟然坑了我这么久,想当年写Python命令行工具的时候,哪有这么麻烦?随随便便写几下,添加个批处理命令脚本就搞定了.怎么Nodejs写一个就这么不顺利呢? 吐槽归吐槽,当我 ...
- php 设计数据库连接池
摘要 之前总是以脚本面向过程的方式写PHP代码,所以很大程度上来说,既不规范,也不安全,更不容易维护.为了代码的重用,准备写一套自己的工具库,这样的话,以后写项目的时候就可以很轻松的进行使用啦. 今天 ...
- Django之mysql表单操作
在Django之ORM模型中总结过django下mysql表的创建操作,接下来总结mysql表记录操作,包括表记录的增.删.改.查. 1. 添加表记录 class UserInfo(models.Mo ...
- Dijkstra算法(带路径模板)
个人心得:Dijkstra算法是贪心思想的一种延伸,注意路径pre,pre数组表示此时最短路径中的前一个顶点.每次更新到目的点时更新: 从源点出发,更新路径,然后找出此时最短的点,然后以这个点为头,看 ...
- 学大伟业DAY2模拟赛
T1忍者钩爪 题目描述 小Q是一名酷爱钩爪的忍者,最喜欢飞檐走壁的感觉,有一天小Q发现一个练习使用钩爪的好地方,决定在这里大显身手. 场景的天花板可以被描述为一个无穷长的数轴,初始小Q挂在原点上.数轴 ...
- TortoiseGit不同分支合并代码2
现在有主分支master和分支day2.现在要把day2上的变更合并到主分支master上! 1.首先切换到目标分支master上. 说明当前分支是master分支. 2.在master分支上查看提交 ...
- [WPF]控件应用多个样式(转)
最近在做WPF项目,公司没有专门的UI工程师,什么都要自己做.接触WPF已经有好几年了,自定义样式什么的也可以做一些.WPF在使用样式的时候一般都是 Style="{StaticResour ...
- Python 函数 set()
set() 功能: set() 函数创建一个无序不重复元素集,可进行关系测试,删除重复数据,还可以计算交集.差集.并集等. iterable -- 可迭代对象对象:返回新的集合对象. 语法 ...
- jQuery ajax submit form 被拦截问题的解决
一般情况下用js或jquery的submit方法提交form表单是不会被浏览器拦截的,但是发现异步的情况下用js提交form表单就会被浏览器拦截,这样就对功能的实现带来了很多的麻烦.网上看了好多都是同 ...