ASP.NET MVC Cannot view CSV Button
ASP.NET MVC Cannot view CSV Button
arosner
Posts: 35Questions: 8Answers: 1
Hello,
I am following the file export example and attempting to add a CSV button.
I include the buttons css file and the buttons array per the example. I tried both the DOM value listed in the example and "lrtip", I strongly prefer to use "lrtip" as I am implementing the column search functionality If I use the DOM value in the example, The global search box appears, which I do not want.
Page Source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>View Database Table - WebTest</title>
<link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="/css/site.css?v=AKvNjO3dCPPS0eSU1Ez8T2wI280i08yGycV9ndytL-c" />
<link rel="stylesheet" href="/WebTest.styles.css?v=xyOsBLRyNkG2GsoapL-7JIUeROtEv0oKfp7j0uBvUy0" />
<link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
tfoot input {
width: 100%;
padding: 3px;
box-sizing: border-box;
}
</style>
</head>
<body>
<header>
<nav b-3df587pwrj class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div b-3df587pwrj class="container-fluid">
<a class="navbar-brand" href="/">WebTest</a>
<button b-3df587pwrj class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span b-3df587pwrj class="navbar-toggler-icon"></span>
</button>
<div b-3df587pwrj class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul b-3df587pwrj class="navbar-nav flex-grow-1">
<li b-3df587pwrj class="nav-item">
<a class="nav-link text-dark" href="/">Home</a>
</li>
<li b-3df587pwrj class="nav-item">
<a class="nav-link text-dark" href="/Home/Privacy">Privacy</a>
</li>
</ul>
</div>
<a class="navbar-brand" href="/Tables">Database Table</a>
</div>
</nav>
</header>
<div b-3df587pwrj class="container">
<main b-3df587pwrj role="main" class="pb-3">
<h2 style="text-align: center;">fms.HDCTREASPF</h2>
<table id="tableData" class="display" style="width:100%">
<thead>
<tr>
<th>testdecimal</th>
<th>testfloat</th>
<th>testint</th>
<th>testmoney</th>
<th>testsmallint</th>
<th>testtinyint</th>
<th>testString</th>
<th>testBit</th>
<th>testDateTime</th>
<th>testVarchar</th>
<th>testDate</th>
<th>testTime</th>
</tr>
</thead>
<tfoot>
<tr>
<th>testdecimal</th>
<th>testfloat</th>
<th>testint</th>
<th>testmoney</th>
<th>testsmallint</th>
<th>testtinyint</th>
<th>testString</th>
<th>testBit</th>
<th>testDateTime</th>
<th>testVarchar</th>
<th>testDate</th>
<th>testTime</th>
</tr>
</tfoot>
</table>
</main>
</div>
<footer b-3df587pwrj class="border-top footer text-muted">
<div b-3df587pwrj class="container">
© 2023 - WebTest - <a href="/Home/Privacy">Privacy</a>
</div>
</footer>
<script src="/lib/jquery/dist/jquery.min.js"></script>
<script src="/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/js/site.js?v=4q1jwFhaPaZgr8WAUSrux6hAuh0XDg9kPS3xIVq36I0"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.7.0.js"></script> <script src="https://cdn.datatables.net/1.13.8/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
bindDatatable();
});
function bindDatatable() {
datatable = $('#tableData')
.DataTable({
"dom": "lrtip",
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is to enable filter (search box)
"pageLength": 10,
"buttons": [
"csv"
],
"ajax": {
"url": "/Tables/LoadData",
"data": {
"rowCount": 12,
},
"type": "POST",
"datatype": "json"
},
"language": {
"emptyTable": "No record found.",
"processing":
'<i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color:#2a2b2b;"></i><span class="sr-only">Loading...</span> '
},
initComplete: function () {
this.api()
.columns()
.every(function () {
let column = this;
let title = column.footer().textContent;
// Create input element
let input = document.createElement('input');
input.placeholder = title;
column.footer().replaceChildren(input);
// Event listener for user input
input.addEventListener('change', () => {
if (column.search() !== this.value) {
column.search(input.value).draw();
}
});
});
},
"columns": [
{
"data": "testdecimal",
"autoWidth": true,
"searchable": true,
},
{
"data": "testfloat",
"autoWidth": true,
"searchable": true,
},
{
"data": "testint",
"autoWidth": true,
"searchable": true,
},
{
"data": "testmoney",
"autoWidth": true,
"searchable": true,
},
{
"data": "testsmallint",
"autoWidth": true,
"searchable": true,
},
{
"data": "testtinyint",
"autoWidth": true,
"searchable": true,
},
{
"data": "testString",
"autoWidth": true,
"searchable": true,
},
{
"data": "testBit",
"autoWidth": true,
"searchable": true,
},
{
"data": "testDateTime",
"autoWidth": true,
"searchable": true,
},
{
"data": "testVarchar",
"autoWidth": true,
"searchable": true,
},
{
"data": "testDate",
"autoWidth": true,
"searchable": true,
},
{
"data": "testTime",
"autoWidth": true,
"searchable": true,
},
]
});
}
</script>
</html>
Thank you.
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
This question has an accepted answers - jump to answer
Answers
Take a look at the docs for
domto learn what the letters mean and how they are applied. All the buttons examples usedom: 'Bfrtip'to place the buttons. These are just examples, you can usedom: 'Blrtip'ordom: 'lBrtip'.Another option is to use
dom: 'lrtip'and use Direct insertion to place the buttons in an element of your choice. You could place adivsomewhere on the page and place the buttons there.Kevin
When I tried to set the DOM variable to "lBrtip", the button still does not appear.
I may be missing it but I don't see where you are loading buttons.js. Use the Download Builder to get the proper set of files to load.
Looks like you are loading jquery.js twice in lines 93 and 97. Also you are loading jquery.datatables.min.js twice in 97 and 98. You should load it only once. You will see strange issues if you load them more than once.
Kevin
Read the
csvHtml5docs for the requirements. You need to also select theHTML5 exportoption. Also this description for theHTML5 exportbutton is on the download page:Please also use triple back ticks to format your code snippets. See the instructions below the
Post comment:Kevin
The CSV button still does not appear. However, multi-field searching, paging and sorting are still operational.
Using the download link:
1) Styling framework is DataTables
2) Select DataTables package
3) Buttons Extension
4) CDN Download Method
Results:
1) https://cdn.datatables.net/v/dt/dt-1.13.8/b-2.4.2/datatables.min.css
2) https://cdn.datatables.net/v/dt/dt-1.13.8/b-2.4.2/datatables.min.js
Page Source Head
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Also since you are using Bootstrap you might want to select the version being used in Step 1 of the Download Builder to get the proper styling. See the Styling docs. Then start with the
domfor the BS version in use to properly place all the elements.Kevin
I am trying to use a DOM variable equivalent to "dom": "lBrtip"
I see this for Bootstrap 5.
"<'row'<'col-sm-12 col-md-6'l><'col-sm-12 col-md-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"
Where does the "B" fit in?
Thank you
Css used is "https://cdn.datatables.net/v/bs5/dt-1.13.8/b-2.4.2/datatables.min.css
JS used is "https://cdn.datatables.net/v/bs5/dt-1.13.8/b-2.4.2/datatables.min.js"
Dom is
Still no CSV button
Any where you want it
. Put the
Bwhere you want the buttons to appear - e.g.:To have it in the top left (add
lback in if you also want the page length control, or use thepageLengthbutton type).On the plus side when DataTables 2 is available (expected to be January) you'll be able to simply do:
Allan
You still didn't select the HTML export option that I mentioned earlier. Open the datatables.min.js link and you will see the options selected. There is also a link to update the selections. Make sure to select HTML export, like this:
Kevin
OK, I see the button now. Thank you.
Is there a way to call a controller method when the CSV button is pressed that will export all filtered rows? Currently only the page that is displayed is exported.
You can use a Custom button, like this example to send a request to the server to generate the CSV file.
Kevin
Thank you Kevin. This solution appears to bring all rows client side into the datatable. Correct? If so, what happens if there are 1 million rows? This is possible in the application I am working on.
With server side processing the only rows available to export are the rows at the client, ie the rows displayed on the page. See this FAQ for options. There is a plugin linked that might be useful.
I didn't present a solution that would bring all the rows client side. Although you could but that would negate the usefulness of server side processing. You will want to find a server side solution to generate the CSV file.
Kevin
Thank you! I am taking your advice and attempting to implement a solution using the button extension. I am trying to add the example, which should call a controller method. However, I am getting a syntax error that I do not see a solution to:
I added the javascript for the extension in my project:
JQuery parameters:
**I am getting a syntax error on the following line and not sure why,
Error is:
fms.HDCTREASPF:119 Uncaught SyntaxError: Unexpected token ':'
**
Thank you
Take a look at the example in the plugin code.
Notice the
{}surrounding the options. This makes it a Javascript object. You are missing them which is causing the syntax error.Kevin
OK, thank you!
I am now getting the error, "cannot extend unknown button type 'download'"
That means the download buttons isn't being registered on your page. You need to include this file It looks like you might be already, so we'd need a link to a page showing the issue to be able to fully determine what is going wrong.
Allan
I'm not sure but the load order might be important so make sure you load the
button.download.jsafter you have loaded the other datatables.js files.Kevin
The download.button javascript is loaded last.
Here is the Page Source:
**I am running the web pages locally, so I do not have a server you can log into.
**
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Please use Markdown code formatting.
I copied your code into this test case.
https://live.datatables.net/bayekune/1/edit
I made a few modifications to allow it to run:
button.download.jsand directly copied the plugin code inside ascripttag at the same spot.ajaxto use one of the JS Bin data sources.ajaxoption.I'm not seeing the
cannot extend unknown button type 'download'error. The download button works although the server code doesn't build a CSV, just returns the table's JSON data. You can verify the download button works by using the browser's network inspector to see the request and response.Possibly the path in this statement is incorrect, look for 404 errors:
To help further with this we will need to see the issue.
Kevin
Thank you Kevin. Your suggestions helped quite a bit. You can close this issue.