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>
  • 相关阅读:
    MySQL用户信息表中主键userID自动增加问题
    PHP输出当前系统时间
    PHP连接MySQL方式比较问题
    DWZ分页处理
    NHibernate ICriteria 查询[转 十年如一]
    HttpContext.Current.Request.Files后台取不到值的解决方法 [转]
    Hibernate Projections(投影、统计、不重复结果)[转]
    细说Form(表单)[ 转 Fish Li]
    HTML <a> 标签的 rel 属性
    dwz rel
  • 原文地址:https://www.cnblogs.com/lkd3063601/p/5414701.html
Copyright © 2011-2022 走看看