angular JS中使用jquery datatable 自定义搜索按钮点击事件 和mRender的 ng-click事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | '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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!