C# Method Sending Data to Tabulator

Here’s a code that retrieves data from database and makes everything ready to pass to Tabulator data table.

C# Mehod

				
					[Authorize]
[HttpPost]
public IActionResult GetData(int page, int size)
{
    // Assuming _context.Courses is a DbSet<Course> in your DbContext
    var totalRecords = _context.Courses.Count();
    // Calculate the total number of pages based on the page size
    var totalPages = (int)Math.Ceiling((double)totalRecords / size);
    // Retrieve the data for the requested page
    var courses = _context.Courses
        .OrderBy(c => c.Id) // Adjust the sorting as needed
        .Skip((page - 1) * size)
        .Take(size)
        .ToList();
    // Create the response object with the required properties
    var response = new
    {
        last_page = totalPages,
        data = courses
    };
    // Return the data as JSON
    return Json(response);
}
				
			

Javascript Code

Here’s the code by which you can initialize Tabulator data table.

CSS Styles

And here are the styles  needed for Tabulator context menu (right click):

				
					<style>
   .tabulator-popup-container {
        padding-right: 45px!important;
        min-width: 200px !important;
        min-height: 30px !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        text-align: center !important;
        padding-top: 8px !important;
        padding-left: 15px !important;
        padding-bottom: 15px !important;
        box-shadow: 10px 10px 10px -5px cornflowerblue;
        /* box-shadow: -70px 0px 70px -70px cornflowerblue inset; */
    }
    .tabulator-popup-container:after {
        content: "گزینه‌های فعال";
        writing-mode: vertical-lr;
        font-size: 12px;
        color: blue;
        text-orientation: mixed;
        position: absolute;
        border-left: solid 1px darkviolet;
        top: 0;
        right: 0;
        z-index: -1;
        padding-left: 5px!important;
        padding-right: 5px!important;
        padding-bottom: 5px!important;
        padding-top: 10px!important;
    }
    .tabulator-menu .tabulator-menu-item {
        min-height: 20px!important;
        text-align: right!important;
        padding: unset!important;
    }
    .tabulator-menu .tabulator-menu-item-header {
        min-height: 20px !important;
        background-color:lightseagreen;
        text-align: right!important;
        color: white;
        padding: 5px!important;
    }
</style>
				
			

Have a great day!