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>

 

posted on 2016-04-20 22:11  落叶子  阅读(8322)  评论(0编辑  收藏  举报

导航