Datatable searching the clicked element - javascript

I have used datatable for a table.
$('#tableid').dataTable({
"aLengthMenu": [
[2, 5, 7, -1],
[2, 5, 7, "All"]
],
"iDisplayLength": 5
});
and I if click on any div element I want the value of the div element to be searched in the datatable.e.g.
<div id="search>
this
</div>
If I click on this, 'this' to be searched in the table.How can this be achieved?
$(document).on('click','#search',function(e)
{
e.preventDefault();
var search=$('#search').val();
}

Use search() function for datatable to search manually
<script>
var table = $('#tableid').dataTable({
"aLengthMenu": [
[2, 5, 7, -1],
[2, 5, 7, "All"]
],
"iDisplayLength": 5
});
$(document).on('click','#search',function(e)
{
e.preventDefault();
var search =$('#search').text();
table.search(search).draw();
}
</script>
<div id="search>
</div>

<script type="text/javascript">
$(document).ready(function() {
var table = $('#example').DataTable({// or .dataTable({ for version under 1.10
"aLengthMenu": [
[2, 5, 7, -1],
[2, 5, 7, "All"]
],
"iDisplayLength": 5
});
// it is more efficient to bind the click event not on body rather only on the needed elements
// you can use class name for selector if you want to use it on more divs
$('.search').click(function(e)
{
e.preventDefault();
// you need to trim the given value because it can contain whitespace characters which can result false filtering
var search = $.trim($(this).text());
table.search(search).draw();
});
});
</script>
<div class="search">
this
</div>
<div class="search">
that
</div>

Related

How to add unique attribute in TR?

I have a form. After submission the data is sent to database.
I want to show all submissions details in dashboard with dataTables.js, What how it looks like.
table = $('#entries').DataTable({
lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
data: data_table,
aoColumnDefs: [{ aTargets: -1, bSortable: false, bSearchable: false}],
"aaSorting": [[0,'desc']],
columns: Submissions.data_columns,
createdRow:function(row,data,dataIndex){
console.log(subId);
for(i=0; i<subId.length; i++){
$(row).attr("subId",subId[i]);
}
}
});
subId is an array where i have submissions' Ids of the form. Is there a way that I could use to add subId's to each row?

datatables + lengthMenu + All + serverside processing + not working

This is a basic datatables fiddle.
This is the default and the dropdowns will show the follwoing Show options 10, 25, 50, 75 and 100 records:
Now what I would like to get working is the "lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ] which I can in this fiddle. But what if I use server side processing, this is where the All option does not work for me. The others do. When I select All it dispalys the data that it was showing and the at the bottom says No data found in the server
As far as i Know the only difference is the data comes from the server. Can anyone advise how i can trouble shoot this? As far as I can tell when I select All I am sending length:-1 and for 10 it is length:10 so not sure why All is not working
$(document).ready(function() {
var dataTable = $('#employee-grid').DataTable( {
"lengthMenu" : [[ 10, 25, 50, -1 ],[ '10', '25', '50', 'All' ]],
//"pageLength": 25,
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#employee-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
$("#employee-grid_processing").css("display","none");
}
}
} );
} );
When using server-side processing, you should ignore the start and length request parameters ONLY IF the length parameters is -1 in your PHP script in order to return all records.
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
1)Means that "ALL" is assigned the value of -1.
2)that's the reason why when u select All your are sending length:-1 and for 10 it is length:10
3)that's the reason why you also get No data found in the server - error
4)to proper this give this in your Controller
var length = Request.Form.GetValues("length").FirstOrDefault() == "-1" ? Convert.ToString(YOUR_LIST.Count()) : Request.Form.GetValues("length").FirstOrDefault();
5)this will tell if length == -1 then take your list total count so that it displays all rows .
For me, changing the 1st 3 of these parameters worked :
dom: 'ZBlrtip',
lengthMenu: [[100, 200, -1], [100, 200, "All"]],
bLengthChange: true,
order: [8, "desc"],
paging: true,
pageLength: 100,
serverSide: true

DataTable.defaults not working in jQuery DataTables-1.10.7

I'm using this plugin here https://www.datatables.net/ along side jQuery.2.1.4.
I'm also trying to utilize functionality provided by both https://www.datatables.net/manual/styling/jqueryui and https://jqueryui.com/
However i keep getting the following error
Uncaught TypeError: Cannot read property 'defaults' of undefined
The code throwing that error is below & its in java-script file "dataTables.jqueryui.js" which i downloaded from here https://www.datatables.net/manual/styling/jqueryui
/* Set the defaults for DataTables initialisation */
$.extend( true, DataTable.defaults, {
dom:
'<"'+toolbar_prefix+'tl ui-corner-tr"lfr>'+
't'+
'<"'+toolbar_prefix+'bl ui-corner-br"ip>',
renderer: 'jqueryui'
} );
EDIT:
Below is how i'm initializing my tables
var oTable;
function TableSorter(arr) {
if (arr == 'Custome') {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else if (arr == null) {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
else {
oTable = $('#myDefaultTable').dataTable({
"bJQueryUI": true,
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"aoColumnDefs": [{ "bSortable": false, "aTargets": arr }],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]]
});
}
};
The problem was being cause by loading "jquery-ui.js" before "jquery.dataTables.js".
I modified my #Scripts.Render('') order in my shared view such that "jquery.dataTables.js" is loaded first before "jquery-ui.js" and that resolved the problem.

How to manually delimit the number of displayed tows of a table (DataTables)?

Is there any possibility to manually delimit the numbers of the displayed rows of a (Data)Table?
Normally we use filtering input, but then the values are fixed; for example: 10, 25, 50, 100, All.
I would like to have a text field where I could insert the number of rows I wish to display; for example: 3, 7, 29, etc and then after clicking a button we would display the "pages" of the table only with the inserted number of rows.
I read some tutorials and did some searches, but was unable to find anything about it.
Here the JavaScript of my table (but I don't think it helps):
$('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
Any help is welcome!
Straight from datatable forums.
var oTable;
$(document).ready(function() {
$('YourButtonIdorSelector').click( function () {
var newDisplayLength = $("TextFieldIDOrSelectorHere").val();
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = newDisplayLength;
oTable.fnDraw();
});
oTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
});
or
var searchTable = $('#search-table').dataTable({
"dom": "<'box-content'<'col-md-4'l><'col-md-8 text-right'f><'clearfix'>>rt<'box-content'<'col-md-5'i><'col-md-7 text-right'p><'clearfix'>>",
"aoColumnDefs": [
{ 'bSortable': false, 'aTargets': [ 8, 9, 10 ] }
],
"aLengthMenu": [[50, 100, 500, -1], [50, 100, 500, "All"]],
"iDisplayLength": 50,
"pagingType": "full_numbers",
"oLanguage": {
"sSearch": 'Filter within results: ',
"sLengthMenu": '_MENU_'
},
});
searchTable.fnSettings()._iDisplayLength = $("TextFieldIDOrSelectorHere").val();
searchTable.fnDraw(); //redraw the table
You can simply add the new length you want displayed to the _iDisplayLength property and redraw the table.
When creating the data table, this stuff would go in the complete callback function fnInitComplete
$('#search-table').dataTable({
"fnInitComplete": function(oSettings,json){
var $table = this;
//example of how many rows to show
var newLength = 29;
//add the new value to your datatable object
oSettings._iDisplayLength = newLength;
//redraw the table, you have to do this to see the changes
$table.fnDraw();
},
//the rest of your settings
});

How to change results per page value in datatables

Datatables has an option to select the number of records shown per page. The default value starts from 10, 25, 50 and 100. How can I change it to start from 5 instead of 10?
10 records is a bit too much and takes a lot of space in my current design.
Thanx!
http://datatables.net/
The fully correct answer would be to use both and display length to 5:
$(document).ready( function(){
$('#table').dataTable({
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]]
});
});
If you use JUST "iDisplayLength", then the dropdown will not have that length in options later or when the page loads (instead you will see the first option, IE 10 by default). If you JUST use "aLengthMenu", then your results will still default to 10 instead of the first menu option.
You will want to use the iDisplayLength parameter when you initialize the DataTable object. Here's the example they list in their documentation:
$(document).ready( function() {
$('#example').dataTable( {
"iDisplayLength": 50
} );
} )
More information can be found here: http://www.datatables.net/usage/options
$.extend(true, $.fn.dataTable.defaults, {
"lengthMenu": [[5, 10, 15, 20, 25], [5, 10, 15, 20, 25]],
"pageLength": 5
});
The answer solved my problem of needing the following scenario
$(document).ready( function(){
$('#table').dataTable({
"aLengthMenu": [[10, 25, 50, 100], ["10 Per Page", "25 Per Page", "50 Per Page", "100 Per Page"]]
});
});
I realize that this question is old, but the accepted answer does not answer the OP's question.
The answer is to override the aLengthMenu option when initializing the dataTable. See here: http://datatables.net/examples/advanced_init/length_menu.html
You can simply add:
"lengthMenu": [
[10, 25, 50, -1],
[10, 25, 50, "All"]
] // remember to add "," if you initialize more option manually
or if you only want to add this option
$('#tablename').dataTable( {
"lengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ]
} );
which will give you a drop-down to select the number of records per page in pagination.
It hardly for the the data tables 1.9
"iDisplayLength": 50

Categories