DatatableJS.Net 3.4.0

This package has been deprecated as it is legacy and is no longer maintained.

Suggested Alternatives

There is a newer version of this package available.
See the version list below for details.

dotnet add package DatatableJS.Net --version 3.4.0

NuGet\Install-Package DatatableJS.Net -Version 3.4.0

This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.

<PackageReference Include="DatatableJS.Net" Version="3.4.0" />

For projects that support PackageReference, copy this XML node into the project file to reference the package.

paket add DatatableJS.Net --version 3.4.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

#r "nuget: DatatableJS.Net, 3.4.0"

#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.

// Install DatatableJS.Net as a Cake Addin
#addin nuget:?package=DatatableJS.Net&version=3.4.0

// Install DatatableJS.Net as a Cake Tool
#tool nuget:?package=DatatableJS.Net&version=3.4.0

The NuGet Team does not provide support for this client. Please contact its maintainers for support.

DatatableJS

What is DatatableJS?

DatatableJS is a helper to create a grid with Jquery Datatable and provides an extension to retrive data generically from Entity Framework context. It possible to use many datatable.js features with Html helper. It gives serverside or client side options. There's more: Wiki Documentation

Ekran Alıntısı

Where can I get it?

Install DatatableJS for .Net Core, .Net 5, .Net 6 and use tag helpers.

PM> Install-Package DatatableJS

@(Html.JS().Datatable<Person>()
        .Name("PersonGrid")
        .Columns(col =>
        {
            col.Field(a => a.Id).Visible(false);
            col.Field(a => a.Name).Title("First Name").Class("text-danger");
            col.Field(a => a.Age).Title("Age").Searchable(false);
            col.Field(a => a.BirthDate).Title("Birth Date").Format("DD-MMM-Y");
            col.Command(a => a.Id, "onClick", text: "Click").Title("");
        })
        .Filters(filter =>
        {
            filter.Add(a => a.Id).GreaterThanOrEqual(1);
        })
        .URL(Url.Action("GetDataResult"), "POST")
        .ServerSide(true)
        .Render()
)

Or, use tag helper:

<js-datatable name="PersonGrid">
    <columns>
        <column field="Id" visible="false" />
        <column field="Name" width="50" title="Full Name" />
        <column field="Age" />
        <command-item field="Id" on-click="onClick" btn-class="btn btn-info" text="Edit" icon-class="fa fa-edit"/>
        <commands field="Id" text="Actions" items='new [] { new Command("Update", "onClick"), new Command("Delete", "onClick") }'/>
    </columns>
    <data-source url="@Url.Action("GetDataResult")" method="POST" server-side="true" data="addParam"/>
    <language url="//cdn.datatables.net/plug-ins/1.10.22/i18n/Turkish.json"/>
    <filters>
        <add field="Id" value="1" operand="GreaterThanOrEqual"/>
    </filters>
    <captions top="top caption here" bottom="bottom caption here"/>
    <render />
</js-datatable>

To use on .Net Frameworks (4.5 ... 4.8) Install DatatableJS.Net from the package manager console:

PM> Install-Package DatatableJS.Net

Then add datatables.net Javascript and CSS files or links to your project.

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>

URL

Set the URL to retrieve data from any action with GET or POST method:

.URL(Url.Action("GetAll", "Person"), "POST")

Use DataRequest object to bind parameters of request. With .ToDataResult(request); extension method, if there is entity framework, execute IQueryable list server side from context. Otherwise manipulate data manually and return DataResult<T> object including data.

Install DatatableJS.Data from the package manager console:

PM> Install-Package DatatableJS.Data

using DatatableJS.Data;

public JsonResult GetAll(DataRequest request)
{
     DataResult<Person> result = ctx.People.ToDataResult(request);
     return Json(result);
}

ServerSide

Enable server-side processing mode. By default DataTables operates in client-side processing mode. Reference:

.ServerSide(true)

Data

Pass additional parameters with .Data("addParam") method and add script function to view.

function addParam() {
   return { Param1: "test1", Param2: true, Param3: 5 };
}

Get additional parameters with names.

public JsonResult GetAll(DataRequest request, string Param1, bool Param2, int Param3)
{
     //
}

Or get parameters with object reference named "data".

public JsonResult GetAll(DataRequest request, AddData data)
{
     //
}

Filters

Add additional filters before render datatable object. These filters are included in .ToDataResult(request) method with request while server side executing.

.Filters(filter =>
{
    filter.Add(a => a.BirthDate).LessThanOrEqual(DateTime.Now);
    filter.Add(a => a.Age).NotEqual(25);
})

Orders

Using this method you can define which column(s) the order is performed upon, and the ordering direction. Reference

.Orders(order => {
    order.Add(p => p.Name, OrderBy.Descending);
    order.Add(p => p.Age, OrderBy.Ascending);
})

This method allows you to readily specify the entries in the length drop down select list that DataTables shows . Reference

.LengthMenu(new int[] {5,10,15})

Set hasAll paramter true to show All option in select.

.LengthMenu(new int[] {5,10,15}, true)

Set allText paramter to change name of option All.

.LengthMenu(new int[] {5,10,15}, true, "All Pages")

Page Length

Number of rows to display on a single page when using pagination. Reference

.PageLength(15)

Name

Calling datatable on client-side is possible with name:

.Name("GridName")

Default name is "DataGrid". If there are multiple grid in single page, different names should be given. Call grid if you need like this:

$(document).ready(function() {
      var table = $('#DataGrid').DataTable();
} );

Searching

This option allows the search abilities of DataTables to be enabled or disabled. Default is "true". Reference:

.Searching(false)

Ordering

Enable or disable ordering of columns - it is as simple as that! DataTables, by default, allows end users to click on the header cell for each column, ordering the table by the data in that column. Default is "true". Reference:

.Ordering(false)

Paging

DataTables can split the rows in tables into individual pages, which is an efficient method of showing a large number of records in a small space. The end user is provided with controls to request the display of different data as the navigate through the data. Default is "true". Reference:

.Paging(false)

Selecting

Select adds item selection capabilities to a DataTable. Items can be rows, columns or cells, which can be selected independently, or together. Reference:

.Selecting(true)
.Selecting(true, SelectItems.Checkbox)
.Selecting(true, SelectItems.Cell, SelectStyle.Single)

Processing

Enable or disable the display of a 'processing' indicator when the table is being processed. Default is true. Reference:

.Processing(false)

ScrollX

Enable horizontal scrolling. When a table is too wide to fit into a certain layout, or you have a large number of columns in the table, you can enable horizontal (x) scrolling to show the table in a viewport, which can be scrolled. Reference:

.ScrollX(true)

Class

Default table css class is "display nowrap dataTable dtr-inline collapsed". It can be replaced with other table class like bootstrap "table table-striped".

.Class("table table-striped")

Captions

Adding some text on table header or footer with Captions method that:

.Captions("Top caption text...", "Bottom caption text...")

Fixed Columns

FixedColumns provides the option to freeze one or more columns to the left or right of a horizontally scrolling DataTable. Reference:

.FixedColumns(leftColumns: 1, rightColumns: 3)

Individual Column Searching

With this feature, data is be searchable column by column if column searchable is not false.

.ColumnSearching(true)

To give class for these inputs:

.ColumnSearching(true, "form-control")

Title

Set column header. Default is property name.

.Title("Person Name");

Or use DisplayAttribute for properties.

[Display(Name = "Person Name")]
public string Name { get; set; }

Format

Customize datetime format with Moment.js expression.

.Format("DD-MMM-Y");

Or use DisplayFormatAttribute for properties.

[DisplayFormat(DataFormatString = "DD-MMM-Y")]
public DateTime? BirthDate { get; set; }

Template

Manipulate and change display of column according to data.

.Template("(data === true) ? '<span class=\"glyphicon glyphicon-ok\"></span>' : '<span class=\"glyphicon glyphicon-remove\"></span>'");

Visible

Set column visible or hidden, default is true.

Searchable

Set column searchable or not, default is true.

Orderable

Set column orderable or not, default is true.

Width

Set column width percentage.

Class

Set css class of column.

DefaultContent

Set default value for null data.

Command

Add column commands to table in a variety of ways.

cols.Command(a => a.Name, "onClick").Title("Link");
cols.Command(a => a.Name, "onClick", "Click").Title("Link");
cols.Command(a => a.Id, "onClick", "Click", "glyphicon glyphicon-edit").Title("Edit");
cols.Command(a => a.Id, "onClick", "Click", "glyphicon glyphicon-edit", "btn btn-danger btn-xs").Title("Edit");

function onClick(e) {
   alert(e);
}

Commands

Add button groups as a commands.

cols.Commands(a => a.Id, new[] { new Command("Update", "onUpdate"), new Command("Delete", "onDelete") }, "Reports").Title("Actions");
cols.Commands(a => a.Id, new[] { new Command("Excel", "onDelete"), new Command("Pdf", "onUpdate") }, "Reports", "", "", "glyphicon glyphicon-export").Title("Export");

Default language is English. You can change with other languages or custumize it. Set json url parameter to Language method for other languages from CDN.

.Language("https://cdn.datatables.net/plug-ins/1.10.20/i18n/Turkish.json")

Or add json file local and customize it.

.Language(Url.Content("/Scripts/Turkish.json"))

Json example is below:

{
    "sEmptyTable":     "No data available in table",
    "sInfo":           "Showing _START_ to _END_ of _TOTAL_ entries",
    "sInfoEmpty":      "Showing 0 to 0 of 0 entries",
    "sInfoFiltered":   "(filtered from _MAX_ total entries)",
    "sInfoPostFix":    "",
    "sInfoThousands":  ",",
    "sLengthMenu":     "Show _MENU_ entries",
    "sLoadingRecords": "Loading...",
    "sProcessing":     "Processing...",
    "sSearch":         "Search:",
    "sZeroRecords":    "No matching records found",
    "oPaginate": {
        "sFirst":    "First",
        "sLast":     "Last",
        "sNext":     "Next",
        "sPrevious": "Previous"
    },
    "oAria": {
        "sSortAscending":  ": activate to sort column ascending",
        "sSortDescending": ": activate to sort column descending"
    }
}

Product	Compatible and additional computed target framework versions.
.NET Framework	net45 is compatible. net451 is compatible. net452 is compatible. net46 is compatible. net461 is compatible. net462 is compatible. net463 was computed. net47 is compatible. net471 is compatible. net472 is compatible. net48 is compatible. net481 was computed.

Compatible target framework(s)

Included target framework(s) (in package)

Learn more about Target Frameworks and .NET Standard.

.NETFramework 4.5
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.5.1
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.5.2
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.6
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.6.1
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.6.2
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.7
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.7.1
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.7.2
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)
.NETFramework 4.8
- Microsoft.AspNet.Mvc (>= 4.0.40804)
- Newtonsoft.Json (>= 13.0.1)
- System.ComponentModel.Annotations (>= 4.0.0)

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version	Downloads	Last updated
3.9.1	190	8/22/2024
3.9.0	142	6/28/2024
3.8.2	136	6/22/2024
3.8.1	151	3/24/2024
3.8.0	630	6/28/2023
3.7.0	185	5/3/2023
3.6.1	250	3/11/2023
3.6.0	330	1/22/2023
3.4.1	330	12/17/2022
3.4.0	324	12/8/2022
3.3.2	348	11/21/2022
3.3.1	742	10/22/2022
3.3.0	446	10/20/2022
3.2.5	418	8/5/2022
3.2.4	446	7/14/2022
3.2.3	1,322	1/16/2022
3.2.2	475	1/13/2022
3.2.0	298	1/2/2022
3.0.1	362	10/21/2021
3.0.0	398	10/10/2021

Added callback functions and stateSave

DatatableJS.Net 3.4.0

DatatableJS

What is DatatableJS?

Where can I get it?

URL

ServerSide

Data

Filters

Orders

Length Menu

Page Length

Name

Searching

Ordering

Paging

Selecting

Processing

ScrollX

Class

Captions

Fixed Columns

Individual Column Searching

Title

Format

Template

Visible

Searchable

Orderable

Width

Class

DefaultContent

Command

Commands

.NETFramework 4.5

.NETFramework 4.5.1

.NETFramework 4.5.2

.NETFramework 4.6

.NETFramework 4.6.1

.NETFramework 4.6.2

.NETFramework 4.7

.NETFramework 4.7.1

.NETFramework 4.7.2

.NETFramework 4.8

NuGet packages

GitHub repositories