I'm using DataTables (datatables.net) and I would like my search box to be outside of the table (for example in my header div).
Is this possible ?
You can use the DataTables api to filter the table. So all you need is your own input field with a keyup event that triggers the filter function to DataTables. With css or jquery you can hide/remove the existing search input field. Or maybe DataTables has a setting to remove/not-include it.
Checkout the Datatables API documentation on this.
Example:
HTML
<input type="text" id="myInputTextField">
JS
oTable = $('#myTable').DataTable(); //pay attention to capital D, which is mandatory to retrieve "api" datatables' object, as #Lionel said
$('#myInputTextField').keyup(function(){
oTable.search($(this).val()).draw() ;
})
As per #lvkz comment :
if you are using datatable with uppercase d .DataTable() ( this will return a Datatable API object ) use this :
oTable.search($(this).val()).draw() ;
which is #netbrain answer.
if you are using datatable with lowercase d .dataTable() ( this will return a jquery object ) use this :
oTable.fnFilter($(this).val());
You can use the sDom option for this.
Default with search input in its own div:
sDom: '<"search-box"r>lftip'
If you use jQuery UI (bjQueryUI set to true):
sDom: '<"search-box"r><"H"lf>t<"F"ip>'
The above will put the search/filtering input element into it's own div with a class named search-box that is outside of the actual table.
Even though it uses its special shorthand syntax it can actually take any HTML you throw at it.
For recent and new version of DataTables, You should follow these steps:
1- searching option must be true.
2- Hide default search input:
.dataTables_filter {
display: none;
}
3- Add new search input:
<input type="text" id="search">
4- Request search:
$('#search').keyup(function() {
var table = $('.table-meetups').DataTable();
table.search($(this).val()).draw();
});
This one helped me for DataTables Version 1.10.4, because its new API
var oTable = $('#myTable').DataTable();
$('#myInputTextField').keyup(function(){
oTable.search( $(this).val() ).draw();
})
I had the same problem.
I tried all alternatives posted, but no work, I used a way that is not right but it worked perfectly.
Example search input
<input id="searchInput" type="text">
the jquery code
$('#listingData').dataTable({
responsive: true,
"bFilter": true // show search input
});
$("#listingData_filter").addClass("hidden"); // hidden search input
$("#searchInput").on("input", function (e) {
e.preventDefault();
$('#listingData').DataTable().search($(this).val()).draw();
});
More recent versions have a different syntax:
var table = $('#example').DataTable();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});
Note that this example uses the variable table assigned when datatables is first initialised. If you don't have this variable available, simply use:
var table = $('#example').dataTable().api();
// #myInput is a <input type="text"> element
$('#myInput').on('keyup change', function () {
table.search(this.value).draw();
});
Since: DataTables 1.10
– Source: https://datatables.net/reference/api/search()
I want to add one more thing to the #netbrain's answer relevant in case you use server-side processing (see serverSide option).
Query throttling performed by default by datatables (see searchDelay option) does not apply to the .search() API call. You can get it back by using $.fn.dataTable.util.throttle() in the following way:
var table = $('#myTable').DataTable();
var search = $.fn.dataTable.util.throttle(
function(val) {
table.search(val).draw();
},
400 // Search delay in ms
);
$('#mySearchBox').keyup(function() {
search(this.value);
});
This should be work for you:(DataTables 1.10.7)
oTable = $('#myTable').dataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.api().search($(this).val()).draw();
})
or
oTable = $('#myTable').DataTable();
$('#myInputTextField').on('keyup change', function(){
oTable.search($(this).val()).draw();
})
You could move the div when the table is drawn using the fnDrawCallback function.
$("#myTable").dataTable({
"fnDrawCallback": function (oSettings) {
$(".dataTables_filter").each(function () {
$(this).appendTo($(this).parent().siblings(".panel-body"));
});
}
});
$('#example').DataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../admin/ajax/loadtransajax.php",
"fnServerParams": function (aoData) {
// Initialize your variables here
// I have assign the textbox value for "text_min_val"
var min_val = $("#min").val(); //push to the aoData
aoData.push({name: "text_min_val", value:min_val});
},
"fnCreatedRow": function (nRow, aData, iDataIndex) {
$(nRow).attr('id', 'tr_' + aData[0]);
$(nRow).attr('name', 'tr_' + aData[0]);
$(nRow).attr('min', 'tr_' + aData[0]);
$(nRow).attr('max', 'tr_' + aData[0]);
}
});
In loadtransajax.php you may receive the get value:
if ($_GET['text_min_val']){
$sWhere = "WHERE (";
$sWhere .= " t_group_no LIKE '%" . mysql_real_escape_string($_GET['text_min_val']) . "%' ";
$sWhere .= ')';
}
If you are using JQuery dataTable so you need to just add "bFilter":true. This will display default search box outside table and its works dynamically..as per expected
$("#archivedAssignments").dataTable({
"sPaginationType": "full_numbers",
"bFilter":true,
"sPageFirst": false,
"sPageLast": false,
"oLanguage": {
"oPaginate": {
"sPrevious": "<< previous",
"sNext" : "Next >>",
"sFirst": "<<",
"sLast": ">>"
}
},
"bJQueryUI": false,
"bLengthChange": false,
"bInfo":false,
"bSortable":true
});
Related
I would like to get a dynamically generated array and pass it into the "order" option of colReorder.
The following works fine:
var colOrder = [2,1,0];
$(document).ready(function() {
dataTable = $('#example').DataTable( {
colReorder: true
} );
dataTable.colReorder.order(colOrder);
} );
Note the array colOrder. I can put a variable for that static array into the dataTables order option.
When I test by having javascript alert the contents of colOrder, I get: 2,1,0 (no brackets)
However, the following does not work:
HTML:
<input id="test" type="hidden" value="2,1,0" />
Javascript:
var colOrder = new Array($('#test').val().split(","));
$(document).ready(function() {
dataTable = $('#example').DataTable( {
colReorder: true
} );
dataTable.colReorder.order(colOrder);
} );
When I test by having javascript alert the contents of colOrder this time, I get: 2,1,0 (no brackets) -- I see no difference! The DataTable is generated, and colReorder even works, but the order I provide with that variable doesn't work.
I get the following error: ColReorder - array reorder does not match known number of columns. Skipping.
Can someone help me? Here is the jsfiddle: https://jsfiddle.net/runnerjoe/k47puxux/1/
Your non-functioning code is producting [["2","1","0"]], not [2,1,0]. Remove the new Array wrapper, as it is nesting the values in another array. You may also need to convert the strings to integers:
var colOrder = $('#test').val().split(",").map(function(index) {
return parseInt(index, 10);
});
Updated fiddle
I am using https://datatables.net/ for my tables. I need localization in this tables witch will set like this:
$('#tableId').dataTable( {
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.11/i18n/Slovak.json"
},
...
but at search input is label which i do not want... Is there any way in init. set label hidden? or empty string? I was trying (after localization set)
...
language: {
"sSearch": ""
}
or
...
oLanguage: {
"sSearch": ""
}
but without result... Any ideas?
You cannot modify the language settings once they are set, without recreating the table. You could load the language JSON first, modify it and then initialise the datatable. Or you could simply strip out plain text from the filter / search filter <label> :
var table = $('#example').DataTable({
...
initComplete : function() {
$('.dataTables_filter label').contents().filter(function() {
return this.nodeType === 3 //TEXT_NODE¹
}).remove()
}
})
The loop is necessary due to the nature of the injected markup :
<div class="dataTables_filter">
<label>
Search
<input />
</label>
</div>
So we cant just use .text('') or similar.
¹ https://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-1950641247
I have been searching for relative posts: Datatables Multi Select Column filter , How to add additional filters to Datatables header? but it does not solve my problem.
I use dataTables 1.9 (legacy one), where I need a filter header exactly at the header like excel does
which will provde a litter button and and then pop up a multi-select(with check boxes) filterer the rows.
So, I need two thing:
a little button to the header and a multi-select displays after click
column filter after multi select close.
Is there a plugin or any simple way to do this? Thank you!
you need to write you desire html in dataTable "fnRender": function (oObj) {} and return that html.
aoColumns: [{
"sName": "ColumnName", sType: 'string', sWidth: '5%', "fnRender": function (oObj) {
var html = '<select>' +
'<option value="volvo">Volvo</option>' +
'<option value="saab">Saab</option>' +
'<option value="mercedes">Mercedes</option>' +
'<option value="audi">Audi</option>' +
'</select>';
return html;
}
}]
html will be added to your desired cell.
I am creating a jqgrid i m creating a row with 2 columns with dropdown box. The dropdowns are getting populated using ajax call. My requirement is I want to replicate this row on click on ADD button in UI. For example for now one row is coming into jqgrid, after clicking ADD button a new row with same content with out refreshing the changed value in first row should be displayed. Is there any way to do that? My jqgrid code is
$("#tbl").jqGrid('GridUnload');
$("#tbl").jqGrid(
{
url : "/searchCriteria.do",
datatype : 'json',
colModel :
[
{name : "test1",label : "TEST1", search : false,cellEdit:true, editable: true,edittype:"select",width:150 ,formatter: createDropDown,title:false},
{name : "test2",label : "TEST2", search : false,cellEdit:true, editable: true,edittype:"select",width:150 ,formatter: createDropDown,title:false}
],
viewrecords: true,
loadonce:true,
width: 1000,
multiselect : true
});
});
You can use a combination of the getLocalRow and addRowData methods to achieve your functionality. Docs for these methods.
Let's say in your HTML you have a button:
<button id="add" type="button">ADD</button>
In your javascript you could have:
<script>
$("#add").click(function(){
var id_of_new_row = something; //you haven't specified which are the exact rows you'd like selected.
//you could use the getDataIDs method to get the row-IDs you're looking for
var new_row_data = $("#gridId").jqGrid('getLocalRow', id_of_new_row));
$("#gridId").jqGrid('addRowData',id_of_new_row+1, new_row_data, "last");
});
</script>
I have a datatable and one of the coloumns is editable( using jeditable plugin) . So now i need a common submit button which will submit the entire changes.
Here is my datatable entry.
$(document).ready(function(){
$('#jtable').html( '<table cellpadding="1" cellspacing="1" border="1" class="pretty" id="edit_table"></table>' );
$("#edit_table").dataTable({
"aaData": {{ result | safe }},
"aLengthMenu" : 100,
"aaSorting": [],
"aoColumns" : [
{'sTitle' : 'Options' },
{'sTitle' : 'Values'}
],
"iDisplayLength": -1,
"bFilter" : false,
"bSearchable" :false,
"bInfinite" :true,
"bSort" :false,
"bPaginate": false
});
$('#edit_table tbody td:eq(3),td:eq(5),td:eq(7)').editable( 'Reschedule.html',{
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
}
} );
} );
So i need a common submit button to submit the data on the table. I have to update the data to DB using python. ( I am using python + flask frame work). Any Help will be appreciated.
I'm yet to use Python to handle forms, so the information here may be wrong, however I hope it is of some use.
Your html form should only have one method, either get or post, not both. Post is more secure. Also you should use an action, and point it to your .py file that will handle the posted data. action="myPy.py"
You can also create a generic button and provide an onclick function to do something else before submitting the form. For example..
html part:
<input type="button" value="Submit Form" class="btn_submit" onclick="submitOrder()" />
alternatively you could use a submit button "input type='submit'..." and then use jQuery to call a function first before submitting, e.g.
$('#yourFormID').submit(function(e) {
//prevent default submit action
e.preventDefault();
//run your function instead
submitOrder();
});
I also found an article about form submission using Python, it may be of help to you...
http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-iii-web-forms