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>
时间: 2025-02-01 05:07:42

angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件的相关文章

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

'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.show = function () { alert("ddd"); } $scope.simpleTableOptions = { sAjaxSource: '/Home/Index', "sServerMethod": "POST", "bProcessing"

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

'use strict'; app.controller('DataTableCtrl', function ($scope, $compile) { $scope.selected = []; $scope.isSelected = function (obj,index, id) { var checkbox = obj.target; checkbox.checked ? $scope.selected.push(id) : $scope.selected.splice(index,1);

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

前不久在网络上看见一个很不错的jQuery的DataTable表格插件.后来发现在MVC中使用该插件的文章并不多.本文将介绍在MVC3.0如何使用该插件.在介绍该插件之前先简单介绍一下,推荐该插件的原因.在项目中我使用jqgrid比较多.但是发现当进行样式调整时jqgrid的样式常常会让美工头疼.而datatable插件却是一个轻量级的jQuery插件.当我通过浏览器查看该js插件rander后的源码.发现只是一个简单的html table,非常简洁.那么在没有特殊要求的情况下使用这个插件,开发

Angular.js中的指令——易懂全解析

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">angular.js中,指令是最基础的

angular js中的directive

angular js中的自定义指令 自定义指令return如下指令定义对象: restrict:restrict约束自定义指令的使用形式,取值有A(属性),E(元素),C(类),M(注释) template:该属性指定angular js指令被替换为html模板 scope:scope:true 表示创建一个作用域,该作用域继承于父作用域(即ng-controller控制的作用域), scope:{} 创建一个完全孤立的作用域,不会继承父作用域的任何数据 scope:{"@"} 创建一

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

Angular.js中处理页面闪烁的方法详解 前言 大家在使用{{}}绑定数据的时候,页面加载会出现满屏尽是{{xxx}}的情况.数据还没响应,但页面已经渲染了.这是因为浏览器和angularjs渲染页面都需要消耗一定的时间,这个间隔可能很小,甚至让人感觉不到,这种情况一切正常,但这个时间也可能很长,这时候用户可能会看到满屏尽是{{xxxx}}.这种情况被叫做"Flash Of Unrendered Content (FOUC)(K)?and is always unwanted.".

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

Angular.js 中的特性,双向绑定. 让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. ‘参数’ 就是$scope对象下的一个对象

AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格式本身是一个关于如何定义模块的提案,在这种定义下模块和依赖项都能够异步地进行加载.它有很多独特的优势,包括天生的异步及高度灵活等特性,这些特性能够解除常见的代码与模块标识间的那种紧密耦合.目前它已经被很多项目所接纳,包括jQuery(1.7). RequireJS RequireJS是一个工具库,主

在Vue.js中引入jQuery的方法:

步骤一:首先先下载jQuery包 cnpm i jquery -D // 下载 jQuery包 步骤二:在webpack.config.js中配置jquery插件 步骤三:在要使用jQuery的组件页面引入jQuery import $ from 'jquery' //引入jquery