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>
复制代码

 

posted on   落叶子  阅读(8378)  评论(0编辑  收藏  举报

编辑推荐:
· 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框架的用法!

导航

< 2025年3月 >
23 24 25 26 27 28 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 1 2 3 4 5
点击右上角即可分享
微信分享提示