angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件
'use strict';
app.controller('DataTableCtrl', function ($scope, $compile) {
$scope.searchFiles = { name: "", ip: "" };
$scope.show = function () {
alert("dd");
}
angular.element("#Btnserach").click(function () {
table.draw();
})
var table = angular.element("#datetable").DataTable({
sAjaxSource: '/Home/Index',
"sServerMethod": "POST",
"bProcessing": true,
"bServerSide": true,
"bPaginate": true,
aoColumns: [
{
data: 'id', "mRender": function (data) {
return '<a ng-click="show()">测试</a>';
}, "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
$compile(nTd)($scope);
}
},
{ data: 'title' },
{
data: 'add_time'
}
],
"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"iDisplayLength": 10,
"oTableTools": {
"aButtons": [
"copy", "csv", "xls", "pdf", "print"
],
"sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
},
"language": {
"search": "",
"sLengthMenu": "_MENU_",
"oPaginate": {
"sPrevious": "上一页",
"sNext": "下一页"
}
},
"aaSorting": [],
"fnServerParams": function (aoData) {
aoData.push(
{ "name": "Name", "value": $scope.searchFiles.name },
{ "name": "Ip", "value": $scope.searchFiles.ip }
);
}
})
});
<div class="widget-body">
<div id="registration-form">
<form role="form">
<div class="form-title">
Contact Us
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputEmail2">用户名</label>
<span class="input-icon icon-right">
<input type="text" class="form-control" id="exampleInputEmail2" placeholder="用户名" ng-model="searchFiles.name">
<i class="fa fa-envelope blue"></i>
</span>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="exampleInputName2">IP地址</label>
<span class="input-icon icon-right">
<input type="text" class="form-control" id="exampleInputName2" placeholder="IP地址" ng-model="searchFiles.ip">
<i class="glyphicon glyphicon-user palegreen"></i>
</span>
</div>
</div>
</div> <button id="Btnserach" type="button" class="btn btn-danger">搜索</button>
</form>
</div>
<table id="datetable" class="table table-striped">
<thead>
<tr> <th style="width: 30%">First Name</th>
<th style="width: 30%">Last Name</th>
<th style="width: 40%">Phone #</th> </tr>
</thead>
<tbody></tbody>
</table> </div>
angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件的更多相关文章
- angular JS中使用jquery datatable添加checkbox点击事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...
- angular JS中使用jquery datatable添加ng-click事件
'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.show = function ( ...
- 分享在MVC3.0中使用jQuery DataTable 插件
前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- (网页)Angular.js 中 copy 赋值与 = 赋值 区别
转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...
- angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制
Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...
- angular.js 中的作用域 数据模型 控制器
1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...
- Angular.js中处理页面闪烁的方法详解
Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...
- 在Angular.js中的H5页面调用Web api时跨域问题处理
/// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...
随机推荐
- js继承的常用方法
写在前面的话:这篇博客不适合对面向对象一无所知的人,如果你连_proto_.prototype...都不是很了解的话,建议还是先去了解一下JavaScript面向对象的基础知识,毕竟胖子不是一口吃成的 ...
- HTML5浏览器定位navigator.geolocation.getCurrentPosition
<!DOCTYPE html> <html> <body> <p id="demo">点击这个按钮,获得您的坐标:</p> ...
- Nginx+Keepalived 主备高可用 安装与配置
环境说明:操作系统:CentOS6.7 x86_64Nginx版本:nginx-1.9.7Keepalived版本:keepalived-1.2.24 主nginx + Keepalived :10. ...
- Spring学习资料以及配置环境
一.Spring4 1.介绍 新特性 SpringIDE 插件 IOC DI 在 Spring 中配置 Bean 自动装配 Bean 之间的关系(依赖.继承) Bean 的作用域 使用外部属性文件 S ...
- 微信小程序开发过程中一些经验总结
1.微信开发者工具报错,微信小程序最低需支持tls1.2版本的问题 原因是服务器不支持ssl的高版本,解决方法: 在/etc/nginx/conf.d文件下,把"ssl_protocols ...
- 关于EasyUI中的Tree
2017年6月21日,天气阴.心情比较沉重. 近期由于毕设的事情,三周不写代码了.这周测试提交了一些BUG,于是开始着手处理,还真的是熟能生巧,三周的功夫就感觉有点生疏.其中有一个BUG就是角色对应的 ...
- Python模块之subprocess--使用Popen来调用系统命令
当我们需要调用系统的命令的时候,最先考虑的os 模块.用os.system()和os.popen()来进行操作.但是这两个命令过于简单,不能完成一些复杂的操作,如给运行的命令提供输入或者读取命 令的输 ...
- Python的多线程编程
提到多线程,很多人就会望而却步,本文将由浅入深地带你攻克python多线程编程,并防止你跳入深坑, 首先看一段简单的代码: from time import ctime,sleep def play_ ...
- 用netsh wlan命令行解决“Win10下WLAN不自动登陆”问题
系统崩溃了,找了一个版本Windows 10重装后,发现进入系统后不会自动连接自己家的Wifi,每次都要手动点"登录",烦不胜烦. 于是百度.Google一起上,找解决方案,然后所 ...
- Gitlab维护记录
目前互联网公司主流的代码仓库统是gitlab,类似github的实现,维护gitlab已经有两年多的时间, 下面说一下维护过程中的注意点,以及如何维护更好. 分别是搭建,首先得搭建起来,不然怎么玩,其 ...