We Keep Coding

Getting search bar to simultaneously work with another search bar [duplicate]

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
});

CQ5 nested multi-field with select option

I will need to add the values that editor writes them in textfield from dialog panel into a <select> option. I have created the multi-field option for the dialog component, but not sure how I should get values in the <select> it self.
I'm using the JS widget for multi-field, you can find it here. I know that the multi-field JS should return a JSON array of options, how do I achieve this in my case?
Here's my XML markup:
<developer
jcr:primaryType="cq:Widget"
title="Data"
xtype="panel">
<items jcr:primaryType="cq:WidgetCollection">
<developer
jcr:primaryType="cq:Widget"
fieldDescription="Click the '+' to add a new data"
fieldLabel="Dev Data"
name="./devdata"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
xtype="devprofile"/>
</developer>
</items>
</developer>
JavaScript that is adding the textfield for multi-field
this.developerName = new CQ.Ext.form.TextField({
fieldLabel : "Developer's Name",
allowBlank: true,
width : 400,
listeners : {
change : {
scope : this,
fn : this.updateHidden
},
dialogclose : {
scope : this,
fn : this.updateHidden
}
}
});
this.add(this.developerName);
And the markup:
<c:if test="${not(empty(developerName))}">
<select id="use-names" class="js-example-basic-multiple">
<option>Example</option>
<option>${developerName}</option>
</select>
</c:if>
Please let me know if you need more detailed shared.

ACS commons has pretty good working example of custom multifield. Take a look at https://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html
Just replace textarea with your dropdown and you will have what you need..

jquery datables plugin and dynamic object name

I struggling with datatables to fill my table.
The problem i have is that when i get my google calendars in this format
{"23gjsd91su3guu509o1bchhqms#group.calendar.google.com":{"calendar_id":"23gjsd91su3guu509o1bchhqms#group.calendar.google.com","calendar_title":"#1612 White Quartz Apartment"},"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com":{"calendar_id":"vqbidsn2u4edlvto0frvevk6ig#group.calendar.google.com","calendar_title":"#994 Cisco Amber (T2)"},"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com":{"calendar_id":"bi07i6futd90lvq9ba8ufvqdu8#group.calendar.google.com","calendar_title":"#1443. Marley Blue"}}
Need help on put datatables to work with this.
Thanks

You must sanitize the JSON so it is ordered on the form [{item}, {item}, ..] :
function sanitizeData() {
result = [];
Object.keys(data).forEach(function(key) {
result.push(data[key]);
})
return result;
}
Then, if you have table like this
<table id="example"></table>
You can now populate a dataTable with the content of the JSON this way :
var table = $('#example').DataTable({
data : sanitizeData(),
columns : [
{ title : 'id', data : 'calendar_id' },
{ title : 'title', data : 'calendar_title' }
]
})
demo -> http://jsfiddle.net/zbuudydv/1/

SetRowData and DirtyCells

I'm using SetRowData to set some row data in a jqGrid
jqColModel = gJqGrid.jqGrid('getGridParam','colModel');
rowData = gJqGrid.jqGrid('getRowData', rowid);
for (var i=0; i<newData.length; i++){
rowData[jqColModel[i+1].name] = newData[i];
}
gJqGrid.jqGrid('setRowData', rowid, rowData);
This is working as expected. The jqGrid row is being updated with the values from the newData object.
I'm then trying to get all the modified cells using
jqRows = gJqGrid.jqGrid('getChangedCells', 'dirty');
but this doesn't seem to be working. I'm trying to batch up all the changes and create a custom save event
My grid definition is as below
$(gJqSel_Table).jqGrid({
caption : 'jqGrid'
, datatype : 'local'
, loadonce : true
, data : formattedLineData
, colNames : customColNames
, colModel : customColModel
, autoencode : true
, rowNum : 1000
, keys : true
, sortable : false
, hidegrid : false
, multiselect : false
, altRows : false
, height : '100%'
, autowidth : true
, shrinkToFit : true
, cellEdit : gSettings.editMode
, cellsubmit : 'clientArray'
, afterEditCell : function (rowid) {
var $editControl = $("#" + rowid).find("input, select, textarea");
if ($editControl){
$editControl.on('paste', function(e) {
GridPaste(e, rowid);
});
}
}
});
Can someone provide some guidance about how I can
use a JSON object to set all the cell values of a row
flag each cell in the row as dirty so that the getChangedCells method knows that the values have changed?

After more reading of the jqGrid documentation I found this
setRowData
Do not use this method when you are editing the row or cell. This will
set the content and overwrite the input elements.
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
Changing my code to use the setCell method works
Cell value is updated
Cell is marked as dirty and included in the getChangedCells results
My code is as below
jqColModel = gJqGrid.jqGrid('getGridParam','colModel');
for (var i=0; i<newData.length; i++){
colName = jqColModel[i].name;
gJqGrid.jqGrid('setCell', rowid, colName, newData[i], 'dirty-cell');
}
Updated
As #Oleg pointed out in the comments, I also had to add the following to mark the jqGrid line as edited:
gJqGrid.setRowData(rowid, false, 'edited');

Ext JS Search possibility in MultiSelect ComboBox

I want to know that how in ExtJS MultiSelect ComboBox i can search for a value. Like if i have entered 's' then a list of items starting with a must be displayed and the item selector should select if it matches with 's'.
This is the code i tried.....
cbCfg = {
name : property.columnname,
hideOnSelect : false,
triggerAction : 'all',
mode : 'local',
width : comboFieldSize,
store : new Ext.data.SimpleStore({
id : 0,
fields : ['strValue','strText'],
data : data
}),
listWidth : 400,
valueField : 'strValue',
displayField : 'strText'
};
field = new form.MultiCombo(cbCfg);
thnkz in advance,
just:-)

I assume that MultiSelect ComboBox extends functionality of Ext.form.ComboBox.
You could try going with triggerAction : 'query', which is the default - it should filter out non-matching entries. Although that could be a little bit counter-intuitive for the user.
Another possible approach is adding typeAhead : true property - should trigger suggesting suggestions based on the text entered by user.