We Keep Coding

Table Sorter sorting and filtering didn't work

I have dynamically table and I use table sorter pager is working well, but when I try to filter some columns it just returns me to page 0 and nothing happened. Somewhere I try to sort them by clicking on th and other strange thing is when I type in the input box debug mode on table sorter say is ok.
var $table = $(".track-grid table.tablesorter");
var pagesize = $('.pagesize').val();
$table.tablesorter({
widthFixed: true,
cssChildRow: 'infoRow',
widgets: ['filter'],
debug: true,
widgetOptions: {
filter_hideFilters: true,
// filter_anyMatch replaced! Instead use the filter_external option
// Set to use a jQuery selector (or jQuery object) pointing to the
// external filter (column specific or any match)
filter_external: '.search',
// add a default type search to the first name column
//filter_defaultFilter: { 1: '~{query}' },
// include column filters
filter_ignoreCase:false
}
});
$table.on('filterInit', function () {
$table.tablesorterPager({
container: $(".pager"),
ajaxUrl: `track/getEvents?page={page}&size={size}&totalCount=` + totalCount,
customAjaxUrl: function (table, url) {
return url;
},
ajaxProcessing: function (data) {
$('.tablesorter tbody').html(data.result.eventsHtml);
$('#trackOverlay').hide();
return [parseInt(data.result.totalEventsCount)];
},
page: 0,
processAjaxOnInit: true,
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})',
updateArrows: true,
fixedHeight: false,
removeRows: false,
savePages: false,
cssNext: '.next', // next page arrow
cssPrev: '.prev', // previous page arrow
cssFirst: '.first', // go to first page arrow
cssLast: '.last', // go to last page arrow
cssGoto: '.gotoPage', // page select dropdown - select dropdown that set the "page" option
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
cssDisabled: 'disabled', // Note there is no period "." in front of this class name
cssErrorRow: 'tablesorter-errorRow' // error information row
});
});

The ajaxUrl option needs to include a filter value. If you look at the example in the documentation, you'll see this:
ajaxUrl: "http://mydatabase.com?page={page}&size={size}&{sortList:col}&{filterList:fcol}",
The {filterList:fcol} adds the filter to the server request.
If the built-in implementation doesn't work for you, use the customAjaxUrl callback to modify the ajax url.

How to ignore fields in search while being able to search using the API?

My table contains thre columns; "name", "description" and "status". I have a dropdown field which filters the table on the status column. Essentially:
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$('#dt').DataTable().column('status:name').search(value).draw();
}
});
This works, but the problem is the standard free-text search input field includes the status field in the free-text search.
Setting searchable: false on the status field causes the dropdown to stop working since Datatable ignores it.
{
data: 'status',
name: 'status',
searchable: false // Stops table.column().search(value) from working :-(
}
Ideally, the (standard) free-text search field should ignore the stuatus column, but the dropdown code should still be working.

This works:
Set the column to searchable: false. This makes the table ignore this column in free text searches.
Add a custom search which uses the original row data, settings.aoData, instead of the data array (it doesn't contain the column because of 1.)
Redraw the table when the filter dropdown changes.
Code:
$('#dt').DataTable(defaults)
.on('init.dt', statusHandling);
function statusHandling(e, settings, processing) {
// Redraw table on dropdown status change
$('.js-status-dropdown').dropdown({
onChange: function (value) {
$(options.table).DataTable().draw();
}
});
// Our custom search function which adds an AND 'status = foo' condition
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var input = $('input[name=status]').val().toLowerCase();
// Use original data instead of 'data' because status is not searchable
var status = settings.aoData[dataIndex]['_aData']['status'];
return status.toLowerCase().indexOf(input) === 0;
}
);
}

jqGrid edit custom function

I have a problem with data validation on an editable cell. I make some cells of one column editable based on the values of these cells. Here is the code of the grid:
jQuery("#cart").jqGrid({
datatype: 'local',
autowidth: true,
height: tabHeight,
gridview: true,
shrinkToFit: true,
autoencode: true,
loadtext: "იტვირთება",
multiselect: true,
idPrefix:"b",
colNames: ['დასახელება', 'რაოდენობა მინ.', 'რაოდენობა მაქს.', 'პოზიცია', 'რაოდენობა', 'ფასი'],
colModel: [{
name: 'asktx',
index: 'asktx',
width: 40,
sorttype: "string",
},
{
name: 'menge_min',
index: 'menge_min',
width: 30,
sorttype: "number",
hidden: true
},
{
name: 'menge_max',
index: 'menge_max',
width: 30,
sorttype: "number",
hidden: true
},
{
name: 'srvpos',
index: 'svrpos',
hidden: true
},
{
name: 'menge',
index: 'menge',
width: 30,
sorttype: "number",
editrules: {
required: true, number: true, custom: true, custom_func: checkInterval
},
editable: true,
},
{
name: 'price',
index: 'price',
width: 30,
sorttype: "string",
search: false,
}],
viewrecords: true,
caption: "არჩეული მომსახურებები",
gridComplete: function () {
var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
for (i = 0; i < l; i++) {
var rowData = jQuery(this).getRowData(ids[i]);
if (rowData.menge_min != rowData.menge_max && !rowData.menge) {
menge_min = rowData.menge_min;
menge_max = rowData.menge_max;
$this.jqGrid('editRow', ids[i], true);
}
}
}
});
I am using gridComplete to check if values of two cells are equal and if they are not, I am making a column called "menge" editable in that row. I have also done the validation for constant values, like if I need to check whether this menge value is between a and b, I can do that and all is fine, although now I need to validate that field value based on the values of "menge_min" and "menge_max" field values, that are hidden. I see that custom function "checkInterval" can have only two parameters, so I can not pass the row ID there. Is there any way for getting some kind of information about the row which is currently being edited in custom validation function?
I fill the grid based on click event on another grid, here is the validation function for now:
var checkInterval = function (value, colname) {
value = parseInt(value);
mange_min = parseInt(menge_min);
menge_max = parseInt(menge_max);
if (value < menge_min || value > menge_max) {
return [false, "რაოდენობა უნდა იყოს " + menge_min + "-" + menge_max + " ინტერვალში"];
} else {
return [true];
}
}
As for multiple editable rows, it is kind of requirement and the user knows he/she entered a correct value if there is no validation error popup and continue to edit other rows. The jqGrid version is 4.5.1.
here is the select event of the other grid:
onSelectRow: function (id) {
if (id && id !== lastSel) {
jQuery(this).restoreRow(lastSel);
lastSel = id;
var celValue = jQuery(this).getRowData(id);
var rowCount = $("#cart").getGridParam("reccount") + 1;
if (celValue.menge_min == celValue.menge_max )
celValue.menge = celValue.menge_min;
var newID = id + rowCount;
jQuery("#cart").jqGrid('addRowData', newID, celValue);
}
}

I see that your problem is accessing to the content of menge_max in menge_min column inside of custom_func callback.
You current code set menge_min and menge_max to the values from the last row of the grid. The loop inside of gridComplete overwrite the value of the variables.
I would recommend you don't start editing mode for multiple rows. It generates many problems. For example the rows could be modified, but not saved. The sorting and filtering (searching) are blocked in the grid. One can use the possibility only after saving of changes in all rows. Typically one implement starting of editing on click on any cell of the grid. The user sees the starting of editing and he/she can press Enter to save the data. Between editing the rows the user can sort or filter the grid (you can add call of filterToolbar method to create the filter bar). In the way the user can easy find the requested row of data and then edit the data.
The version 4.5.1, which you currently use, is very old. It was published about 3 years ago. You have no callbacks with exception custom_func, which you can use and because you edit multiple rows at the same time.
The simplest way to solve your problems would be updating to free jqGrid 4.13.0. Free jqGrid is the fork of jqGrid which I develop starting with the end 2014. It have enchantment which you need. I implemented alternative way to specify custom validation. Instead of usage custom: true, custom_func: checkInterval one can use custom: checkInterval instead (custom property is not Boolean, but callback function instead). In the case the custom callback would get one parameter options with many properties which you can use. The properties are described here (see the comment for additional information). You could need options.rowid and to use var item = $(this).jqGrid("getLocalRow", options.rowid); to get full item of data where item.menge_max and item.menge_min can be used.
Additionally I would recommend you to use addRow inside of onSelectRow or parent grid. You can use initdata option to specify the data of the grid and no rowID. The documentation of addRow described the default value of rowID incorrectly. The default value of rowID is null, even for the version 4.5.1 (see the line of code), and jqGrid generates unique rowid automatically in the case. You can then remove the code from gridComplete. If you would implement starting of inline editing on selection the rows in the grid then the user can do all what he need without any restrictions.
The last remark. If you would migrate to free jqGrid you can remove menge_min, menge_max and svrpos columns from the grid. Instead of that you can use additionalProperties: ["menge_min", "menge_max", "svrpos"]. It informs free jqGrid to save the value of the properties in the local data, but not place the information in some hidden cells of the grid (no unneeded information in the DOM of the page).
In any way you can remove unneeded sorttype: "string" and index properties from colModel.

ng-grid change sorting order onchange of drop down

I am using ng-grid , i have implemented search functionality on it but i want to change orderby option by changing drop down value.
I wish to provide drop down on change of its value data soting should happen.
by default Sort-functionality is there which works on click of table heading but i need to change sorting order on change of dropdown.
This code i got from somewhere but i dont know how to use it ?
$scope.gridOptions = {
data: 'gridData',
columnDefs: [
{field: 'name', displayName: 'Name'},
{field:'ageWord', displayName: 'Age'}
],
sortInfo: {
fields: ['age'],
directions: ['asc']
}
};

You need to define values for the sortInfo and useExternalSorting of your grid options, like this:
$scope.gridOptions.useExternalSorting = true;
$scope.gridOptions.sortInfo = {
fields: [$scope.selectedDropDownOption], // <-- or whatever variable used to store selected option from dropdown
directions: ['asc']
};

e.g.: if you want to sort by name, you could set
sortInfo: { fields: ['name'], directions: ['asc']}
this would order your grid by name and ascending
you also want to set useExternalSorting = true in your gridOptions.
i suggest you have a look at the docu and examples pages

I used following code ,,,
HTML :
<input type="text" ng-model="sortColumn"></input>
<button type="button" class="btn" ng-click="updateSortInfo()">Sort</button>
aap.js ::
$scope.updateSortInfo = function() {
$scope.gridOptions.sortBy($scope.sortColumn);
}

Reached here while searching for solution of similar thing. After trying all options I have applied this.
//Disable Grid Ui Sorting through header
$scope.gridOptions.enableSorting = false;
//Apply angular 'orderBy' filter to data for grid ui
$scope.resultSetTable = $filter('orderBy')($scope.gridData, 'YOUR_SORT_COLUMN');
// Apply data to grid ui
$scope.gridOptions.data = $scope.resultSetTable;

How to prevent kogrid to automatically select newly added items, preserving current selection?

I've following issue: I have two kogrids on my page. One one the left, one on the right side.
Between them I added two buttons so that the user can move selected items from the left to the right side and the other way round.
Therefor my view model has 4 arrays, ItemsA, SelectedItemsA, ItemsB and selectedItemsB. The two kogrids are configured as followed:
<div data-bind="koGrid: {
data: ItemsA,
selectedItems: SelectedItemsA,
displaySelectionCheckbox: false,
enableRowReordering: true,
enableSorting: false,
columnDefs: [
{ field: 'Name', cellTemplate: tableCellTemplate, cellClass: 'player-row' },
{ field: 'ClubName', displayName: 'Mannschaft' },
{ field: 'DisplayPosition', displayName: 'Position', cellTemplate: playerPositionNameTemplate}
],
footerVisible: false
}">
</div>
On moving items from left to the right, I will push every item from SelectedItemsA into ItemsB via:
$.each(self.SelectedItemsA(), function(idx, player) {
self.ItemsB.push(player);
});
And cleaning the selection on the left side via:
self.ItemsA.removeAll(self.SelectedItemsA());
They items will appear correctly in the grid on the right side bounded to ItemsB, but they are automatically selected. So if I want to move a single item back, I first have to deselect all items I moved previously! How can I prevent kogrid from automatically selecting newly added items?

Its a bug in koGrid.
In koGrid-2.1.1.debug.js:
self.setRenderedRows = function (newRows) {
self.renderedRows(newRows);
self.refreshDomSizes();
};
newRows is an array of the rows you selected / copied.
koGrid copies them as they are, that means, that newRows.selected() (observable) is true.
UPDATE
Turns out, the above change would also de-select rows after they scrolled out of vision range. But i figured you can just set __kg_selected__ to false for each row you want to copy.
Say:
ko.utils.arrayForEach(self.SelectedItemsA(), function(player) {
player.__kg_selected__ = false;
});
and then push them all to the new array:
ko.utils.arrayPushAll(self.ItemsB(), self.SelectedItemsA());