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

时间:2021-10-09 22:57:23
'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>