Code Monkey home page Code Monkey logo

datatable-serverside-implementation-sample's Introduction

DataTable-ServerSide-Implementation-Sample

This project is an example serverside implementation of datatable plugin (https://datatables.net/) in dotnet core, It is one simple CRUD application together with the datatable implementation, it facilitates generics, and expressions to get the most out of C#, the goal is to get dynamically built IQuerable, provided any datatable options for any object type, a dynamic query will be built. It use EF Core and dotnet Core.

How it works

Datatable plugin will send the options to the server, based on these options (which is defined by you) the server will generate the according IQueryable which will execute at the database , it will automatically do the searching ordering, and pagination specified by the options sent from the datatable, by leveraging expression builders read more about expression builders here and here.

Datatable Options (View side)

First you need to tell the plugin that it will be processed by the server by assigning these 2 options to true, and assign the url to the options

                   `                                                                                                                        
                   processing: true,                                                                                
                    serverSide: true,                                                                                                                 
                    ajax: {                                                                                                         
                        url: "@Url.Action("GetDTResponseAsync")",                                                     
                        type: "POST",                                                         
                        error: function (ex) {                                    
                                             }
                        `

Now you need to specify columns options, the source of each columns, and is it searchable and orderable or not. let's walk through these options

Columns

                      `
                      columns: [                                                                                                                       
                        { data: "id", title: "NO", width: "50px", class: "text-center" },                                   
                        { data: "title", title: "TITLE", width: "20%", class: "text-center" },                              
                        { data: "mainCategory.name", title: "MainCategory", width: "20%", class: "text-center" },                       
                        { data: "subCategory.name", title: "SubCategory", width: "20%", class: "text-center" },                         
                        { data: "", defaultContent: '', title: "Modify", width: "15%", class: "text-center" }                     
                    ]
                    `

as you can see, here we specify the data property for each column, which is the source or some of you might call it navigation property or attribute of the row, title will be the cell's header text.

columnDefs

                    `
                    columnDefs: [
                        { "orderable": false, "targets": [-1] },                                                                  
                        { "searchable": false, "targets": [-1] },
                        { "orderable": true, "targets": [0,1,2,3] },
                        { "searchable": true, "targets": [0,1,2,3] }
                        
                        `

Here we specify which columns are searchable or not using the index of the columns, ex 0 = id, and so on. you can find the sample under \Views\Home\Index.cshtml.

Serverside function

This function will accept the datatable options which will be sent by the plugin, you can have a look at Options class if you are interested. Now you can either use the repo I created, and use GetOptionResponseWithSpec Function which will return Datatable Response Object all you need to assign is the type, any expressions you want to include (Navigation Properties) Below is an example you can find in HomeController\GetDTResponseAsync.

If you don't want to use the Repository, all you need to do is actually use the GetOptionResponseAsync Function, you can find it at Datatable Helper class , this function will generate the IQuerable and execute it, and wrap the response, it is an extension method of IQuerable. You can use it like this.

await context.Set<T>().GetOptionResponseAsync<T>(options);

of course keep in mind adding navigation properties (Include) if you have any.

I hope this was a good readme file, please don't hesitate to ask me anything @ [email protected]

datatable-serverside-implementation-sample's People

Contributors

rezres avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.