zoukankan      html  css  js  c++  java
  • 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=" 30%">First Name</th>
                                <th style=" 30%">Last Name</th>
                                <th style=" 40%">Phone #</th>
                                
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                  
                </div>
  • 相关阅读:
    【简●解】POJ 1845 【Sumdiv】
    【简●解】 LG P2730 【魔板 Magic Squares】
    团队会议01
    【随手记】原型展示+电梯演讲
    发际线总和我作队-第一次视频会议
    团队项目-记账App
    人生第一篇博客 , 当然是经典的 "Hello World"
    窗体评分系统
    优化MySchool数据库设计总结
    相关子查询
  • 原文地址:https://www.cnblogs.com/lkd3063601/p/5414701.html
Copyright © 2011-2022 走看看