0

I am trying to write an event handler for page change in a datatable. following is the existing code.. the libraries are included in a baselayout for following code..

DefaultView.cshtml

<div class="row">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6 pageheading">
        <h1>
            <small>AMS Default</small>
        </h1>
    </div>
</div>
<hr />
<br />

<div class="row">
    <div class="col-lg-12">
        <table dt-options="dtOptions" datatable dt-columns="dtColumns"
               class="table table-striped table-bordered dt-responsive">
            <thead>
                <tr>
                    <th></th>
                    <th></th>
                    <th></th>
                    <th></th>
                </tr>
            </thead>
        </table>
    </div>
</div>

@section CommonScripts{
    <script src="~/Angular/Areas/Common/Controllers/DefaultController.js"></script>
    <script src="~/Angular/Areas/Common/Services/DefaultService.js"></script>
}

Defaultcontroller.js

    AMSApp.controller('DefaultController', ['$rootScope', 'DefaultService', 'DTOptionsBuilder', 'DTColumnBuilder',

        function ($rootScope, DefaultService, DTOptionsBuilder, DTColumnBuilder) {
        var self = this;

        this.Users = {};

        this.GetAllUsers = function () {
            $rootScope.CloseAlerts();

            DefaultService.GetAllUsers().success(function (result) {
                self.Users = result;
                self.loadd();
            }).catch(function (error) {
                $rootScope.ErrorMsg = "OOPS some thing went wrong. Please try again.";
            });
        }

        this.GetAllUsers();

        this.loadd = function () {
            $rootScope.dtColumns = [
                DTColumnBuilder.newColumn('DisplayName').withTitle('UserName'),
                DTColumnBuilder.newColumn('IsSNA').withTitle('IsSNA'),
                DTColumnBuilder.newColumn('IsAdmin').withTitle('IsAdmin'),
                DTColumnBuilder.newColumn('IsDownloadPermitted').withTitle('DownloadPermitted')
            ];

            $rootScope.dtOptions = DTOptionsBuilder.newOptions()
            .withOption('data', self.Users)
            .withDisplayLength(10);
        }



    }]);

    /*

    Button Click handler:

        $("#customerSearchButton").on("click", function (event) {
            $.ajax({
                url: "",
                type: "post",
                data: { searchText: searchText }
            }).done(function (result) {
                Table.clear().draw();
                Table.rows.add(result).draw();
            }).fail(function (jqXHR, textStatus, errorThrown) {
                // needs to implement if it fails
            });
        }

    */

DefaultService.js

AMSApp.service('DefaultService', function ($http) {
    this.GetAllUsers = function () {
        return $http.get('/Common/User/GetAllUsers');
    }
});

I tried several versions like in the above-commented code.. but I need something like following in the controller.

/*need something like this*/
            DTOptionsBuilder.on('page.dt', function () {
                var info = table.page.info();
                console.log("hey i got eexecuted");
                $('#pageInfo').html('Showing page: ' + info.page + ' of ' + info.pages);
            });

firstly is it possible? - if not what are other alternatives?

Note: I prefer not to give an id to the table.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.