Data Table & Jquery | Overwrite The Count Of Result
-------------------------------
Subscribe my Channel:-
http://www.youtube.com/user/SanketRooney?sub_confirmation=1
Facebook Page:-
https://www.facebook.com/UnpossibleNS
Twitter Account:-
https://twitter.com/UnpossiblePOG
Blog:-
https://unpossiblepog.blogspot.com/
Website:-
https://unpossiblepog.com/
Gaming Instagram:- (@unpog.gaming)
https://www.instagram.com/unpog.gaming/
-------------------------------
Code :-
<table id="userTable">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</thead>
<tbody>
<tr>
<td>Extra Column 1</td>
<td>Extra Column 2</td>
<td>Extra Column 3</td>
</tr>
<tr>
<td>100</td>
<td>Steven</td>
<td>King</td>
</tr>
<tr>
<td>101</td>
<td>Neena</td>
<td>Kochhar</td>
</tr>
<tr>
<td>102</td>
<td>Lex</td>
<td>De Haan</td>
</tr>
<tr>
<td>103</td>
<td>Alexander</td>
<td>Hunold</td>
</tr>
<tr>
<td>104</td>
<td>Bruce</td>
<td>Ernst</td>
</tr>
<tr>
<td>105</td>
<td>David</td>
<td>Austin</td>
</tr>
<tr>
<td>106</td>
<td>Valli</td>
<td>Pataballa</td>
</tr>
<tr>
<td>107</td>
<td>Diana</td>
<td>Lorentz</td>
</tr>
<tr>
<td>108</td>
<td>Nancy</td>
<td>Greenberg</td>
</tr>
<tr>
<td>109</td>
<td>Daniel</td>
<td>Faviet</td>
</tr>
<tr>
<td>110</td>
<td>John</td>
<td>Chen</td>
</tr>
<tr>
<td>111</td>
<td>Ismael</td>
<td>Sciarra</td>
</tr>
<tr>
<td>112</td>
<td>Jose Manuel</td>
<td>Urman</td>
</tr>
<tr>
<td>113</td>
<td>Luis</td>
<td>Popp</td>
</tr>
<tr>
<td>114</td>
<td>Den</td>
<td>Raphaely</td>
</tr>
<tr>
<td>115</td>
<td>Alexander</td>
<td>Khoo</td>
</tr>
<tr>
<td>116</td>
<td>Shelli</td>
<td>Baida</td>
</tr>
<tr>
<td>117</td>
<td>Sigal</td>
<td>Tobias</td>
</tr>
<tr>
<td>118</td>
<td>Guy</td>
<td>Himuro</td>
</tr>
<tr>
<td>119</td>
<td>Karen</td>
<td>Colmenares</td>
</tr>
</tbody>
</table>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#userTable').DataTable({
"ordering": false,
"searching":false,
initComplete: function() {
pageCountDatatable();
}
});
});
function pageCountDatatable()
{
var actual_cnt=20;
var str_array = $("#userTable_info").html().split(" ");
for(var i=0;i<str_array.length;i++)
{
if(!isNaN(str_array[i]))
{
if(parseInt(str_array[i])>actual_cnt)
{
str_array[i] = actual_cnt;
}
}
}
$("#userTable_info").html(str_array.join(" "));
$("#userTable_info").show();
}
$("#userTable").on('page.dt',function(){
$("#userTable_info").hide();
setTimeout(function(){
pageCountDatatable();
},1000);
});
$("#userTable").on('length.dt',function(){
$("#userTable_info").hide();
setTimeout(function(){
pageCountDatatable();
},1000);
});
</script>
-------------------------------
In this tutorial, I shall show how we can overwrite the count of result in data table.
Here, we have one data table with 20 rows of actual data.
In this data table, I just wanted to add extra row which will represent additional column and will not be the part of the actual data.
So, actually I wanted to display 20 entries as a text instead of 21 entries.
So for that, I shall create a javascript function.
I am going to call it inside initComplete function.
For now, we add static value of actual row count as 20 rows.
Of course you can get that count dynamically.
Just inspect element, and find out the ID for that div.
Copy it.
We shall use it’s ID to get text inside it.
We shall split it by space. And convert it into an array.
In for loop, first we shall find out whether the specific array position has numeric value to it or not because we don’t want to replace texts. Then, we shall only replace numbers and those numbers which are greater than 20.
After the end of the loop, we shall overwrite the text in same ID.
So, if we refresh, we shall see that it is showing “20 entries” text.
However if we change the length per page, or change pages, it will again go back to “21 entries” text.
So for that, first copy the table ID, on its page change event, we shall write some jquery.
If we change page number, it shows an alert box, but it won’t change the text even if we call function.
So to fix that, we have to delay it’s execution by using the setTimeout function.
The time delay will be 1 second.
Call our function inside it.
However the output behaves weirdly so we shall hide it the page changes.
And we shall show it when the output becomes ready.
To display same output when page length is changed, copy-paste the whole code.
And replace “page” with “length”.
And now, your output will display no more than 20 entries text.
You can copy-paste the code from the link given in the description.
Thanks for watching. Like, Share and Subscribe.
