jquerydatatableasp.net-core-mvc
DataTable Jquery Length change bug problem
I'm trying to length change in dataTable
here is my code:
@{
Layout = null;
}
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>Trident</td>
<td>
Internet
Explorer 4.0
</td>
<td>Win 95+</td>
<td> 4</td>
<td>X</td>
</tr>
<tr>
<td>Trident</td>
<td>
Internet
Explorer 5.0
</td>
<td>Win 95+</td>
<td>5</td>
<td>C</td>
</tr>
<tr>
<td>Trident</td>
<td>
Internet
Explorer 5.5
</td>
<td>Win 95+</td>
<td>5.5</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>
Internet
Explorer 6
</td>
<td>Win 98+</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td>7</td>
<td>A</td>
</tr>
<tr>
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td>6</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td>1.9</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td>1</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td>1.1</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td>1.2</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td>1.3</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td>1.4</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td>1.5</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td>1.6</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td>1.7</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td>1.8</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td>125.5</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td>312.8</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td>419.3</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td>522.1</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td>420</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td>420.1</td>
<td>A</td>
</tr>
<tr>
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td>413</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td>8.5</td>
<td>C/A<sup>1</sup></td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td>3.1</td>
<td>C</td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td>3.3</td>
<td>A</td>
</tr>
<tr>
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td>3.5</td>
<td>A</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td>1</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td>-</td>
<td>A</td>
</tr>
<tr>
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td>-</td>
<td>X</td>
</tr>
<tr>
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td>-</td>
<td>C</td>
</tr>
<tr>
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td>-</td>
<td>U</td>
</tr>
</tbody>
@*<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>*@
</table>
<!-- Google Font: Source Sans Pro -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
<!-- Ionicons -->
<link rel="stylesheet" href="//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="~/plugins/fontawesome-free/css/all.min.css">
<!-- Tempusdominus Bootstrap 4 -->
<link rel="stylesheet" href="~/plugins/tempusdominus-bootstrap-4/css/tempusdominus-bootstrap-4.min.css">
<!-- iCheck -->
<link rel="stylesheet" href="~/plugins/icheck-bootstrap/icheck-bootstrap.min.css">
<!-- JQVMap -->
<link rel="stylesheet" href="~/plugins/jqvmap/jqvmap.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="~/dist/css/adminlte.min.css">
<!-- overlayScrollbars -->
<link rel="stylesheet" href="~/plugins/overlayScrollbars/css/OverlayScrollbars.min.css">
<!-- Daterange picker -->
<link rel="stylesheet" href="~/plugins/daterangepicker/daterangepicker.css">
<!-- summernote -->
<link rel="stylesheet" href="~/plugins/summernote/summernote-bs4.min.css">
@*
<!-- JsGrid -->
<link rel="stylesheet" type="text/css" href="~/plugins/jsgrid/demos/demos.css" />
<link rel="stylesheet" type="text/css" href="~/plugins/jsgrid/css/jsgrid.css" />
<link rel="stylesheet" type="text/css" href="~/plugins/jsgrid/css/theme.css" />
<!-- JQuery -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/cupertino/jquery-ui.css">
*@
<!-- DataTables -->
<link rel="stylesheet" href="~/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="~/plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="~/plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
<!-- jQuery -->
<script src="~/plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap -->
<script src="~/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE -->
<script src="~/dist/js/adminlte.js"></script>
<!-- DataTables & Plugins -->
<script src="~/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="~/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="~/plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="~/plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="~/plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="~/plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="~/plugins/jszip/jszip.min.js"></script>
<script src="~/plugins/pdfmake/pdfmake.min.js"></script>
<script src="~/plugins/pdfmake/vfs_fonts.js"></script>
<script src="~/plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="~/plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="~/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="~/plugins/datatables-buttons/js/buttons.colVis.min.js"></script>
<script src="~/plugins/datatables-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script>
$(function () {
// Setup - add a text input to each footer cell
$('#example1 thead tr').clone(true).appendTo('#example1 thead');
$('#example1 thead tr:eq(1) th').each(function (i) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
});
var table = $("#example1").DataTable({
"orderCellsTop": true,
"fixedHeader": true,
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"language": {
"emptyTable": "No data available in table"
}
@*"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]*@
});@*.buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');*@
});
</script>
but when I'm trying to change showing entity list, (such as 10, 25, 50, 100) bug happens.
showing 10 entities is fine enter image description here
but when I change to showing 25 entities, bugs happens enter image description here
red box is happened in footer. (created new filter in footer)
of course, top filter is exist too.
how can I remove footer filter??
Solution
From your code, you are using multiple plugins scripts reference, but I'm not sure which version of DataTable plugin you are using, can you explain more detail about it?
According to the DataTable examples, I create a sample using your code and use the following Javascript library files, the data table works well:
@section Scripts{
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.9/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.9/css/fixedHeader.dataTables.min.css" />
<script>
$(function () {
// Setup - add a text input to each footer cell
$('#example1 thead tr').clone(true).appendTo('#example1 thead');
$('#example1 thead tr:eq(1) th').each(function (i) {
var title = $(this).text();
$(this).html('<input type="text" placeholder="Search ' + title + '" />');
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
});
var table = $("#example1").DataTable({
"orderCellsTop": true,
"fixedHeader": true,
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"responsive": true,
"language": {
"emptyTable": "No data available in table"
}
@*"buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]*@
});@*.buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');*@
});
</script>
}
The result as below:
So, the issue might relate another CSS library or your custom CSS style, try to update or remove them. And you could also just use the above JavaScript scripts reference and CSS library files and remove other references.
- How to change from Decode Html to text normal
- "{}" what does this mean in the below function?
- Make Bootstrap Popover Appear/Disappear on Hover instead of Click
- Highcharts .getJSON - chart not plotting
- How do I populate a dropdown options from an ajax response
- How to force background image to stretch/compress to fit div, without keeping aspect ratio
- jqGrid not rendering data - Headers visible
- jQuery 1.3.2 -using .click()
- What's the best way to deal with ASP.NET's ClientID
- Button click not showing/hiding content
- bootstrap table doesnot display data
- How to select(highlight) and copy ordered list numbers
- Ajax Parse Error when returning array from PHP
- Pagination where the number of pages is automatically discovered from a specific folder on the server
- How to wait until an element exists?
- jQuery UI " $("#datepicker").datepicker is not a function"
- jQuery isn't working properly in Laravel 8
- How to use a variable value as the key name in an ajax data submit?
- How to get the POST values from serializeArray?
- Increase setInterval time over time?
- How to parse JSON data with jQuery / JavaScript?
- Slide Element Up Into Page?
- jQuery / Javascript code check, if not undefined
- Dynamically focus out blur contenteditable
- SimpleModal, How to close pop up window with animation
- how to use jQuery Cropper for multiple images
- Validate kendo upload control
- How can I count and show Unicode Characters when insert onclick to textarea?
- I can't set text after modifying the text
- Why my datatable Fixed header doesn`t work /