Angular-Datatables enabling server pagination

Question

I have a very large data set displayed with angular-datatables, and am trying to enable server-side pagination with the datatables plugin in my angular component. The API call is to an ASP.NET core service that I am also writing

I cannot seem to find much documentation on how to go about this at all, and I'm relatively new to the datatables plugin.

My API GET declaration:

public async Task<IActionResult> GetOperations(
   int pageIndex = 0, int pageSize = 50, string query = null)

This uses pageIndex and pageSize to call my repository pagination logic.

My datatable component declaration is the same as is detailed in the angular-datables documentation angular way: https://l-lin.github.io/angular-datatables/#/basic/angular-way

Should I be using the AJAX way? Is there a way to make this work nicely in angular? If so do I need anything specific to be done in the API Controller that would help?

I'm also not entirely sold on the angular-datatables ui component, if you know of something that may work better for large dataset displaying and editing, feel free to recommend it.

The example load all the data and pagine then, you must use some like learn.microsoft.com/en-us/aspnet/mvc/overview/older-versions-1/… — Eliseo
– Eliseo, Commented Jun 28, 2018 at 13:32

Matt · Accepted Answer · 2018-10-04 09:33:34Z

2

The main goal here is to create model which reflects datatables post model, so it can be resolved later by model binder in your controller, and yes, you should definitely go with the ajax way. I did it recently and it worked just right.

Afterwards you can write some actions which will use your model and process data accordingly.

So your controller could look something like this.

    [HttpPost]
    [Route("GetTableData")]
    public IActionResult GetEmployees([FromBody] DataTablesOptions model)
    {
        var propertyMappings = _propertyMappingService.GetMappings<Employee, EmployeeDto>();
        var employees = _employeeRepository.GetEmployees()
            .ApplySearch(model, propertyMappings)
            .ApplySort(model, propertyMappings)
            .ProjectTo<EmployeeDto>(_mapper.ConfigurationProvider)
            .ToPagedList(model);

        return DataTablesResult(employees);
    }

Please take a look at my code as I implemented recently full server side processing with angular-datatables and asp net core webapi.

I'm still developing it, but main view for employees table works and it should give you some guidance how to do it.

https://bitbucket.org/mateusz_kikmunter/generic-angular-service/src/master/

answered Oct 4, 2018 at 9:33

Matt

3364 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user3230660 Over a year ago

Thanks for the awesome amazing outstanding example app.

Collectives™ on Stack Overflow

Angular-Datatables enabling server pagination

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related