Blazor and DataTables: pass params like columns - datatables

Question

I have integrated in my Blazor WebAssembly a DataTables. In the index.html I added the following javascript code
<script>
function DataTablesAdd(table) {
$(document).ready(function () {
$(table).DataTable();
});
}
function DataTablesRemove(table) {
$(document).ready(function () {
$(table).DataTable().destroy();
// Removes the datatable wrapper from the dom.
var elem = document.querySelector(table + '_wrapper');
elem.parentNode.removeChild(elem);
});
}
</script>
In a Razor page I added
#inject IJSRuntime JSRuntime
#implements IDisposable
#code {
public void Dispose()
{
JSRuntime.InvokeAsync<bool>("DataTablesRemove", "#tableData");
}
protected async override Task OnAfterRenderAsync(bool firstRender)
{
await JSRuntime.InvokeAsync<string>("DataTablesAdd", new string[] { "#tableData" });
await base.OnAfterRenderAsync(firstRender);
}
}
The DataTables is working. Now, I want to not order some columns, for example in the following image I don't want to order by Gap analysis and Publication Plan.
So, in the index.html I added another function
function DataTablesAdd(table, columns) {
$(document).ready(function () {
$(table).DataTable({
"columns": columns
});
});
}
In the page I added this C# code
protected async override Task OnAfterRenderAsync(bool firstRender)
{
string cols = "[{ name = \"Username\", orderable = \"true\" }, " +
"{ name = \"Gap analysis\", orderable = \"false\" }," +
"{ name = \"Publication plan\", orderable = \"false\" }," +
"{ name = \"Last update\", orderable = \"true\" }]";
await JSRuntime.InvokeAsync<string>("DataTablesAdd", new string[] { "#tableData" }, cols);
await base.OnAfterRenderAsync(firstRender);
}
Unfortunately, it doesn't work and also the DataTables is not applied to the table for a jQuery error.
How can I pass same parameters to the javascript function and use them in the DataTables definition?

Answer 1

You could pass the arguments to the JavaScript function as object array.
protected async override Task OnAfterRenderAsync(bool firstRender)
{
string cols = "[{ name = \"Username\", orderable = \"true\" }, " +
"{ name = \"Gap analysis\", orderable = \"false\" }," +
"{ name = \"Publication plan\", orderable = \"false\" }," +
"{ name = \"Last update\", orderable = \"true\" }]";
await JSRuntime.InvokeAsync<string>("DataTablesAdd", new object[] { "#tableData", cols });
await base.OnAfterRenderAsync(firstRender);
}
At the JavaScript capture the columns string and parse it back to JavaScript object as follows.
function DataTablesAdd(table, columns) {
$(document).ready(function () {
$(table).DataTable({
"columns": JSON.parse(columns)
});
});
}
Disclaimer: I have not tested the code.

Answer 2

For now, I found a very simple way to resolve this issue. I changed the function for adding a DataTables like the following code
function DataTablesAdd(table) {
$(document).ready(function () {
$(table).DataTable({
"order": [],
"columnDefs": [{
"targets": 'no-sort',
"orderable": false,
}]
});
});
}
Then, where I define the table, I add the class with value no-sort.
<table class="table table-hover" id="tableData">
<thead>
<tr>
<th>Last update</th>
<th>Username</th>
<th class="no-sort">Gap analysis</th>
<th class="no-sort">Publication plan</th>
</tr>
</thead>
</table>
So, the DataTables render doesn't allow to sort for the headers with class="no-sort".
I still have to sort out how to pass data from the function parameters to DataTables.