angular datatable和datatable插件不起作用

时间:2017-07-07 13:50:19

标签: jquery angularjs

这将显示为" $ scope.RegionData.withDOM不是函数"还有" $ scope.RegionData.withButtons不是函数"。

并且它将显示为" DTColumnBuilder未定义"。

     .controller('RegionController', function( $scope , regionService) {
     $scope.dtOptions = $scope.RegionData
     .withDOM("<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp")
    .withButtons(
        [
        {extend: 'copy',className: 'btn-sm'},
        {extend: 'csv',title: 'ExampleFile', className: 'btn-sm'},
        {extend: 'pdf', title: 'ExampleFile', className: 'btn-sm'},
        {extend: 'print',className: 'btn-sm'}
        ]
    );
     $scope.dtColumns =
     [
            DTColumnBuilder.newColumn('region_id').withTitle('Region ID'),
            DTColumnBuilder.newColumn('region_name').withTitle('Region Name'),
            DTColumnBuilder.newColumn('region_code').withTitle('Region Code'),
            DTColumnBuilder.newColumn('created_by').withTitle('Created By')

     ];
});

在我的控制器代码中写为调用,因此api以json格式返回。

  <link rel="stylesheet" href="app/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css" />
<!-- App styles -->
<link rel="stylesheet" href="app/fonts/pe-icon-7-stroke/css/pe-icon-7-stroke.css" />
<link rel="stylesheet" href="app/fonts/pe-icon-7-stroke/css/helper.css" />
<link rel="stylesheet" href="app/styles/style.css">

<script type="text/javascript" src="app/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="app/bower_components/jquery-ui/jquery-ui.min.js"></script>
<script type="text/javascript" src="app/bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>

<script type="text/javascript" src="app/JSCRIPT/bootstrap/dist/js/bootstrap.min.js"></script>

<script type="text/javascript" src="app/bower_components/Flot/jquery.flot.js"></script>
<script type="text/javascript" src="app/bower_components/Flot/jquery.flot.resize.js"></script>
<script type="text/javascript" src="app/bower_components/Flot/jquery.flot.pie.js"></script>


<script type="text/javascript" src="app/bower_components/flot.curvedlines/curvedLines.js"></script>
<script type="text/javascript" src="app/bower_components/jquery.flot.spline/index.js"></script>
<script type="text/javascript" src="app/bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script type="text/javascript" src="app/bower_components/iCheck/icheck.min.js"></script>

<script type="text/javascript" src="app/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="app/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="app/bower_components/pdfmake/build/pdfmake.min.js"></script>
<script type="text/javascript" src="app/bower_components/pdfmake/build/vfs_fonts.js"></script>
<script type="text/javascript" src="app/bower_components/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="app/bower_components/datatables.net-buttons/js/buttons.print.min.js"></script>
<script type="text/javascript" src="app/bower_components/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="app/bower_components/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>

<script type="text/javascript" src="app/angular/angular.js"></script>
<script type="text/javascript" src="app/angular/angular-route.js"></script>
<script type="text/javascript" src="app/bower_components/angular-flot/angular-flot.js"></script>
<script type="text/javascript" src="app/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="app/bower_components/angular-datatables/dist/plugins/buttons/angular-datatables.buttons.min.js"></script>
<script type="text/javascript" src="app/bower_components/angular-datatables/dist/angular-datatables.min.js"></script>

也是我的索引文件,写为

    public static IQueryable WhereLike(this IQueryable source, string propertyName, string pattern)
    {
        if (source == null) throw new ArgumentNullException("source");
        if (propertyName == null) throw new ArgumentNullException("propertyName");

        var a = Expression.Parameter(typeof(object), "a");
        var prop = Expression.Property(a, propertyName);

        return source.Provider.CreateQuery(
            Expression.Call(
                typeof(SqlMethods), "Like",
                null,
                prop, Expression.Constant(pattern)));
    }

并且这个div显示在表格中。

1 个答案:

答案 0 :(得分:1)

您错过了在控制器中注入 DTColumnBuilder *angular-datatable*

首先安装DTOptionsBuilder。然后在您的控制器中注入: DTColumnBuilder .controller('RegionController', function( $scope , regionService, DTOptionsBuilder, DTColumnBuilder) { }

例如:

{{1}}