CODEWITHSUNDEEP
angularasp.net-coreangular-datatables
Mason Turvey
Mason Turvey

Reputation: 325

Angular-Datatables enabling server pagination

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.

Upvotes: 2

Views: 1423

Answers (1)

Matt
Matt

Reputation: 336

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/

Upvotes: 2

Related Questions