Develop Reference

EditableGrid - How to make every column header into individual filter

I am using EditableGrid (http://www.editablegrid.net/) Which creates some nice looking Editable tables
I'm Trying to modify the table header to make them into Individual filters like in example - https://phppot.com/demo/column-search-in-datatables-using-server-side-processing/
Current Filter textbox works very nicely but has a limit for searching one value for all columns.
I find many solutions for an individual column filter but I don't want to use other tables as they do not provide inline table editing functionality with dropdown and date picker, Is there a way I can implement it in EditableGrid?
I have also Asked this Question on Github (https://github.com/webismymind/editablegrid-mysql-example/issues/66) but the thread is not been active for a long time so I have very little hope of getting a solution from there.

In index.html update this code: see where //new code ---- starts and //new code ---- ends, try it out..
<script type="text/javascript">
var datagrid;
window.onload = function() {
datagrid = new DatabaseGrid();
//new code ---- starts
var list = document.getElementsByTagName("thead")[0];
for(var i = -1; i < list.childNodes.length; i++){
var input = document.createElement("input");
input.type = "text";
input.className = "filter";
list.getElementsByTagName("th")[i+1].appendChild(input);
}
var z = document.getElementsByClassName('filter')
for(var i = 0; i< z.length; i++){
z[i].addEventListener("input", function(e){
datagrid.editableGrid.filter( e.target.parentNode.querySelector("input").value, [i]);
})
}
//new code ---- ends
// key typed in the filter field
$("#filter").keyup(function() {
datagrid.editableGrid.filter( $(this).val());
// To filter on some columns, you can set an array of column index
//datagrid.editableGrid.filter( $(this).val(), [0,3,5]);
});
$("#showaddformbutton").click( function() {
showAddForm();
});
$("#cancelbutton").click( function() {
showAddForm();
});
$("#addbutton").click(function() {
datagrid.addRow();
});
}
$(function () {
});
</script>

Storing Key and Value using Javascript in array

I have a jsp page on which table is coming dynamically and have checkboxes on that page when you click on that box it should save in array and when it uncheck the box it should remove value from array.
I have tried this by creating a method but it is not working perfectly can you please help me..
function addCheckboxVAlues(checked){
var split = checked.value.split("|");
var key =split[0];
var value=split[1];
var chks = $("input[name='"+key+"']:checked");
if (chks.length > 0) {
uninvoiced.push(value);
} else {
uninvoiced.pop(key);
}
console.log(uninvoiced);
}

You need to use splice to remove the element from the array
function addCheckboxVAlues(checked){
var split = checked.value.split("|");
var key =split[0];
var value=split[1];
var chks = $("input[name='"+key+"']:checked");
var index = uninvoiced.indexOf(key);
if (chks.length > 0) {
uninvoiced.push(value);
} else if(index > -1){
uninvoiced.splice(index, 1);
}
console.log(uninvoiced);
}

This code looks way more complex than it needs to be. Presumably the checkbox has a click listener on it, so it should be called with the checkbox as this. All you have to do is add the value if the checkbox is checked, or remove it if it's unchecked.
That will be hugely more efficient than running a checked selector every time.
The following uses an inline listener for convenience, likey you're attaching them dynamically but it seems to be called the same way.
var uninvoiced = [];
function addCheckbox(el) {
var value = el.value.split('|')[1];
if (el.checked) {
uninvoiced.push(value);
} else {
uninvoiced.splice(uninvoiced.indexOf(value), 1);
}
console.log(uninvoiced);
}
foo|bar: <input type="checkbox" value="foo|bar" onclick="addCheckbox(this)">
fee|fum: <input type="checkbox" value="fee|fum" onclick="addCheckbox(this)">
There is a polyfill for indexOf on MDN.

JQuery DataTables How to get selected rows from table when we using paging?

For example I selected (checked) 2 rows from second page than go to first page and select 3 rows. I want get information from 5 selected rows when I stay at first page.
$('tr.row_selected') - not working
Thanks.
Upd.
I created handler somthing like this:
$('#example').find('tr td.sel-checkbox').live("click", function () {
/*code here*/
});
But right now when click event is hadle the row from table is hidding. I think it may be sorting or grouping operation of DataTables. Any idea what I must do with this?

When a checkbox gets selected, store the row information you want in a global object as a Key-Value pair
I don't remember specifically how i did it before but the syntax was something like
$('input[type=checkbox]').click(function()
{
var row = $(this).parent(); //this or something like it, you want the TR element, it's just a matter of how far up you need to go
var columns = row.children(); //these are the td elements
var id = columns[0].val(); //since these are TDs, you may need to go down another element to get to the actual value
if (!this.checked) //becomes checked (not sure may be the other way around, don't remember when this event will get fired)
{
var val1 = columns[1].val();
var val2 = columns[2].val();
myCheckValues[id] =[val1,val2]; //Add the data to your global object which should be declared on document ready
}
else delete myCheckValues[id];
});
When you submit, get the selected rows from your object:
for (var i = 0; i < myCheckValues.length; i++)
...
Sorry, haven't done JS in a long time so code as is might not work but you get the idea.

$('#example').find('tr td.sel-checkbox').live("click", function () {
var data = oTable.fnGetData(this);
// get key and data value from data object
var isSelected = $(this).hasClass('row_selected');
if(isSelected) {
myCheckValues[key] = value;
checkedCount++;
} else {
delete myCheckValues[key];
checkedCount--;
}
});
.....
On submit
if(checkedCount > 0) {
for(var ArrVal in myCheckValues) {
var values = myCheckValues[ArrVal]; // manipulate with checked rows values data
}
}

How to remove duplicated content/value with jQuery

So, i have span element where i appending some content - sometimes this content is duplicated. How to remove this one value which is duplicate of another ...
This is how looks like my output html:
<span class="some_class">
"value01"
"value01"
"value02"
"value03"
"value03"
</span>
I can't add any function because i have no idea how to do this, can u help me?

If these values are being added by JS code, then You can make sth like this:
http://jsfiddle.net/Sahadar/Nzs52/5/
You just have to make object which will store all strings placed inside this span, then just before insertion check if this inserted string is already in store object.
function(event) {
var textareaValue = textarea.value();
if(insertedTexts[textareaValue]) {
event.preventDefault();
textarea.value('');
} else {
insertedTexts[textareaValue] = true;
someSpan.append("\""+textareaValue+"\"");
}
}
If these values are already inside span, use function as follows:
var someSpan = $('.some_class');
var insertedTexts = [];
var result = someSpan.text().match(/"\w+(?=\")/gm);
result = result.map(function(value) {
return value.substring(1,value.length);
});
result.forEach(function(value) {
if(insertedTexts.indexOf(value) === -1) {
insertedTexts.push(value);
}
});
var newSpanText = "\""+insertedTexts.join('""')+"\"";
someSpan.text(newSpanText);
console.info(result, insertedTexts);
It's rebuilding span text (trimming etc.) but main functinality is preserved.
jsFiddle working copy:
http://jsfiddle.net/Sahadar/kKNXG/6/

Create an array variable
var vals = [];
which keeps track of the items. Then, in your function that appends items to the span check:
if (vals.indexOf("Mynewvalue") > -1) {
// Add to the span...
}

How to make a selection list to null in runtime?

I have a code that fetches a list from DB. Using that returned array i am creating a grid table and two combo boxes dynamically. Now, the code is working fine for first time. I can also able to add new entry to the database and show it in the grid. Now the problem is with the combo box.
Whenever i add a new entry, the table gets updated by deleting the previous content in the table and fetching again from the DB along with new entry. But the combo options get appended with the newly arrived data. See, the image. Chemical Engg is newly addded.
But i dont know to reset or delete existing combo box contents. I know that the solution is a piece of code that makes the combo box null. It has to be placed on the top of combo box generation code. So, that it ll reset every time before generating new elements.
My question is how to make that combo box null in the starting point.(I dont know what exact term is "null" or "reset", i new to DOM elements).
Here my Code.
The HTML ELEMENT:
<select id="departmentField" >//Both using same data source.
<select id="searchDepartments">
The Script:
Its DWR Call... I think the problem comes below the grid.
EmployeeManagement.getDeptList(function(deptRecords) {
$("#depts").clearGridData(true);
$("#depts").jqGrid('addRowData', "deptID", deptRecords);
var deptSearchSelect = document.getElementById('searchDepartments');
var searchOptions = null;
searchOptions = document.createElement('option');
searchOptions.value = 0;
searchOptions.innerHTML = "ALL";
deptSearchSelect.appendChild(searchOptions);
var depFieldSelect = document.getElementById('departmentField');
var deptFieldOpts = null;
deptFieldOpts = document.createElement('option');
deptFieldOpts.value = 0;
deptFieldOpts.innerHTML = "";
depFieldSelect.appendChild(deptFieldOpts);
for(i = 0; i<deptRecords.length; i++) {
var dept = deptRecords[i];
searchOptions = document.createElement('option');
searchOptions.value = dept.deptID;
searchOptions.innerHTML = dept.deptName;
deptSearchSelect.appendChild(searchOptions);
deptFieldOpts = document.createElement('option');
deptFieldOpts.value = dept.deptID;
deptFieldOpts.innerHTML = dept.deptName;
depFieldSelect.appendChild(deptFieldOpts);
}
deptSearchSelect.selectedIndex = "ALL";
deptSearchSelect.selectedIndex = "";
//var respDiv = document.getElementById("respCheck");
});
How shall i reset?
Any suggestions would be more appreciative
Thanks in advance!!!

Try deleting each element in the select:
while(deptSearchSelect.hasChildNodes()) {
deptSearchSelect.removeChild(deptSearchSelect.firstChild);
}
while(depFieldSelect.hasChildNodes()) {
depFieldSelect.removeChild(depFieldSelect.firstChild);
}
Are you also not able to set the select box properly?