'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事件的更多相关文章

  1. angular JS中使用jquery datatable添加checkbox点击事件

    'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $s ...

  2. angular JS中使用jquery datatable添加ng-click事件

    'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.show = function ( ...

  3. 分享在MVC3.0中使用jQuery DataTable 插件

    前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原 ...

  4. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  5. (网页)Angular.js 中 copy 赋值与 = 赋值 区别

    转自st.gg Angular.js 中 copy 赋值与 = 赋值 区别 为什么用 $scope.user = $scope.master; $scope.master 会跟着 $scope.use ...

  6. angular.js 中同步视图和模型数据双向绑定,$watch $digest $apply 机制

    Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $ap ...

  7. angular.js 中的作用域 数据模型 控制器

    1.angular.js 作为后起之秀的前端mvc框架,他于传统的前端框架都不同,我们再也不需要在html中嵌入脚本来操作对象了.它抽象出了数据模型,控制器及视图. 成功解耦了应用逻辑,数据模型,视图 ...

  8. Angular.js中处理页面闪烁的方法详解

    Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染 ...

  9. 在Angular.js中的H5页面调用Web api时跨域问题处理

    /// <summary> /// 被请求时 /// 在Angular.js中的H5页面调用Web api时跨域问题处理 /// </summary> /// <para ...

随机推荐

  1. [0] Lc.exe 已退出,代码 -1

    可能的原因是:在你的项目中引用了第三方组件,并且这个第三方组件是个商业组件,他在组件的主使用类定义了LicenseProvider(typeof(LicFileLicenseProvider))这个A ...

  2. chrome谷歌浏览器-DevTool开发者工具-详细总结

    目录: 一.概述 1.官方文档 2.打开方法: 3.前言: 二.九个模块: 1.设备模式Device Mode 2.元素面板Elements 3.控制台面板Console 4.源代码面板Sources ...

  3. JAVAEE学习路线分享

    今天把我的教学经验分享给大家.适合大多数人的学习路线.注:目前作者已经转行做java培训. 首先是培养兴趣.先开始学习HTML知识.也就是做网页,从这里开始比较简单,就是几个标签单词需要记住. 接着开 ...

  4. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  5. 从app上传图片到php,再上传到java后端服务器的方法一览

    在现在的网络开发中,上传图片类的需求实在是太普通不过了,但是对于怎么样做到上传图片,对于刚开始建立项目的时候,还是有点不知所措的.也许有幸,我们做的项目是之前已经有人写过类似的用例了,那么我们只需要依 ...

  6. 我的IT开源之路

    我开通博客这么久也从没有写过什么,那时只是喜欢看别人的技术博客,然后转发到我的私人空间有空时候读一读.这几年下来,我关注了有几百个博客.公众号.头条号.新浪微博等等,里面有无数的好文章.但是,一直也没 ...

  7. 使用javac编译zookeeper项目

    这里记录zookeeper编译源代码上的一些细节的问题. 网上不少关于如何使用ant eclipse来构建zookeeper对应的eclipse工程的记录.这里就不再过多赘述.只做简单阐述. 这里主要 ...

  8. JDBC02 利用JDBC连接数据库【使用数据库连接池】

    目录 1/2/3  Statement 和 Preparedstatement 的区别 4 读取properties配置文件 5 数据库连接池 6 利用数据库连接池连接数据库 1 使用Statemen ...

  9. 浅谈MySQL的事务隔离级别

    希望这篇文章能够阐述清楚跟数据库相关的四个概念:事务.数据库读现象.隔离级别.锁机制 一.事务 先来看下百度百科对数据库事务的定义: 作为单个逻辑单元执行一系列操作,要么完全执行,要么完全不执行.事务 ...

  10. JAVA - 工厂模式

    1. 简单工厂违背OCP(Open Close Principle)原则 , 即对增加开放,对修改关闭.如果要符合OCP原则,要针对接口编程. //简单工厂模式,违反了OCP原则 public cla ...