I am trying to overwrite few defaults value for databale js
Below code is working fine
$.extend($.fn.dataTable.defaults, {
"scrollCollapse": true
});
But i want to make it conditional basis like first checking id of datable
I tried below code
$.fn.dataTableExt.aoFeatures.push({
"fnInit": function (oSettings) {
console.log('d');
return new TableTools({
"oDTSettings": {
"scrollCollapse": true
}
});
},
"cFeature": "T",
"sFeature": "TableTools"
});
But not working, I also thought to give try below
$.fn.dataTable.ext.feature.push({
fnInit: function (settings) {
console.log(settings);
var setting = new $.fn.dataTable.Filtering(settings);
return filter.node(); // input element
},
cFeature: 'F'
});
But i found this is not being called.
Fiddle
Any help appreciated
Thanks
Related
I use jQuery DataTable and there is a checkbox on the toolbar that is used for retrieving all records or not. As stateSave feature of DataTable does not work properly, I tried to use jquery.cookie in order to keep the checkbox value after reloading the DataTable (because the checkbox is redrawn dynamically on every reload) as shown below:
$(document).ready(function() {
$('#example').DataTable( {
//code omitted for brevity
"serverSide": true,
"ajaxSource": "/Student/GetStudents",
"fnServerData": function (sSource, aoData, fnCallback) {
/* Add some extra data to the sender */
aoData.push({ "name": "isAll", "value": $("#cbIsAll").is(":checked") });
$.getJSON(sSource, aoData, function (json) {
/* Do whatever additional processing you want on the callback, then tell DataTables */
fnCallback(json);
});
},
"fnDrawCallback": function() {
$("div.toolbar").html('<input type="checkbox" id="cbIsAll" name="demo" /> Get all records');
}
});
$(document).on('change', '#cbIsAll', function () {
var isClicked = $('#cbIsAll').is(':checked') ? true : false;
$.cookie('clicked', isClicked, { expires: 1 }); // expires in 1 day
table.ajax.reload();
$('#cbIsAll')[0].checked = ($.cookie('clicked') == "true") ? true : false;
});
});
After debugging the code I saw that although the $('#cbIsAll')[0].checked line is executed properly as true, the checkbox lost value later than this line. Could you please clarify me about where the mistake is? Or is there a better and smart way to keep the checkbox value?
There is no reason to use $.cookie in your case. In the checkbox change event, you can simply store the value of the checked state and use that to set the checked property of the new checkbox generated when you reload the table
var isChecked;
$(document).on('change', '#cbIsAll', function () {
// Store the current value
isChecked = $(this).is(':checked');
....
Then in the datatable's callback function, set the checked state of the checkbox
$('#cbIsAll').prop('checked', isChecked);
Official example for Angular-ui select2 tags is:
myAppModule.controller('MyController', function($scope) {
$scope.list_of_string = ['tag1', 'tag2']
$scope.select2Options = {
'multiple': true,
'simple_tags': true,
'tags': ['tag1', 'tag2', 'tag3', 'tag4'] // Can be empty list.
};
});
And I have this piece of code:
$scope.select2Options = {
'multiple': true,
'simple_tags': true,
'tags': $scope.categoryNames
};
$scope.$watch(function () { return adminCrudService.getCategoriesForUpdate(); }, function () {
$scope.action = "edit";
$scope.categoriesForUpdate = adminCrudService.getCategoriesForUpdate();
if ($scope.categoriesForUpdate.length > null) {
$scope.categoryNames = [];
_.forEach($scope.categoriesForUpdate, function (item) {
$scope.categoryNames.push(item._backingStore.Name);
});
}
});
But this just doesn't work, when I click on Selcet2, I get No matches found and I've logged $scope.categoryNames inside $watch, and data is there (so that part works fine).
So my question is can tags be loaded dynamically, and if they can, how ?
I've recently encountered this issue when using the AngularUI Select2 project, and solved it by making the tags argument a function that returns the model. For example:
$scope.select2Options = {
multiple: true,
simple_tags: true,
tags: function () {
return $scope.categoryNames;
}
};
Any updates to the $scope.categoryNames is reflected in the view because Select2 calls the tags function when opened and on every key press.
Hopefully this is useful for people wanting to use Select2 rather than Chosen.
Well, I couldn't get it to work, so I've deiced to use Chosen instead, following this great tutorial: link and I got result I wanted in no-time.
What I want is that I have few links like
sample Link 1 sample Link 2
and I want to call the static html when user clicks the link. For that I have written a code
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.popup-link').on('click',
function() {
var dialog = new A.Dialog({
bodyContent: 'Loading...',
centered: true,
title: 'Sample Popup Content',
width: 400,
height:600
}
).render();
dialog.plug(
A.Plugin.IO,
{
autoLoad: false,
uri: '/html/sample.html'
}
);
dialog.io.start();
});
});
but this does not work, it simply does not call the function when I click the link, I also tried this, but same thing
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(A){
.....
......
Any idea what is wrong here?
Finally I got why it was not working. I was using the same object "A" in the click function as well.
it should be like this: (have a look at the variable name event)
AUI().ready(
'aui-aria',
'aui-dialog',
'aui-overlay-manager',
'dd-constrain',
function(A) {
A.all('.sample-popup').each(function() {
this.on('click', function(event){
.....
......
I don't know much about AUI but if you want to achieve same task using jQuery you can achieve like this
i.e
<script>
$(document).ready(function() {
$('.popup-link').click(function(){
alert($(this).text());
});
});
</script>
Or
Using Javascript
i.e
Link
<script type="text/javascript">
function theFunction () {
// return true or false, depending on whether you want to allow the `href` property to follow through or not
}
</script>
HTH
I have an issue I can't seem to track down. I am using Flot to graph some data, super easy. I want to add the hover effect you see here: Flot Example
Unfortunately, under no circumstance can I get the 'plothover' event to fire. This is a brief snippet from the code:
$.plot($chartArea, eventData, eventOptions);
$chartArea.bind("plothover", function (event, pos, item) {
console.log('hovering!');
});
Is there something you need to set in the options object to enable this behavior? Thanks!
Like an idiot, I forgot to include the grid option. Check out the object:
eventOptions = {
points: {
show: true
},
lines: {
show: true
},
grid: { hoverable: true, clickable: true },
xaxis: {
min:earliestMessage.timestamp,
max:currentTime,
mode:"time",
ticks:10
}
};
notice the grid parameter. That's what was missing. Duh!
:)
I'm not sure what $chartArea is in your code, but lets try something like this:
var chartArea = $("#placeholder"); // your chart div
$.plot(chartArea, eventData, eventOptions);
$(chartArea).bind("plothover", function (event, pos, item) {
console.log('hovering!');
});
I need to hide the operator in the search popup, but I cannot get it to work.
I tried this, but both operators still appear:
jQuery("#grilla").navGrid("#paginador",
{del:false,add:false,edit:false},{},{},{},{
groupOps: [{ op: "OR", text: "any" }], multipleSearch:true});
Any ideas?
Thanks!
There are no option which can directly do what you need. Moreover if you would hide the ADD/OR operand from the searching dialog at the dialog initialization (for example inside of beforeShowSearch event handler) with $('select.opsel').hide() the select element will be hidden only at the beginning. After the user click on any button the dialog contain will be repaint without calling of any event handler and the select element will be again visible.
So I suggest to solve the problem with overwriting the method reDraw of the filter dialog. The code which do this can look like
jQuery("#grilla").jqGrid("navGrid","#paginador",
{del: false, add: false, edit: false}, {}, {}, {},
{
multipleSearch: true,
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function () {
// hide the AND/OR operation selection
$('select.opsel', searchDialog).hide();
setTimeout(function () {
// set fucus in the last input field
$('input[type="text"]:last', searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function () {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
}
);
You can see on the demo that the way really works.
UPDATED: After writing of the answer I posted some suggestions to trirand to improve jqGrid. Now jqGrid has many features which simplify the above work. For example there are exist afterRedraw callback which can be directly used. So the code from the answer will look like
grid.jqGrid("navGrid", "#pager",
{add: false, edit: false, del: false}, {}, {}, {},
{
multipleSearch: true,
afterRedraw: function (p) {
var $form = $(this);
$form.find("select.opsel").hide();
setTimeout(function () {
// set fucus in the last input field
$form.find('input[type="text"]:last').focus();
}, 50);
$form.find("input.add-rule,input.delete-rule").button();
}
}
);
See the modified demo here:
I added one more line in the code of afterRedraw
$form.find("input.add-rule,input.delete-rule").button();
only to improve the look of buttons in the Searching Dialog. I suggested to make such settings default in jqGrid, but this was not accepted by trirand. In any way everyone who includes jQuery UI can add such line in afterRedraw to make the buttons flat.
The accepted answer didn't work for me with 4.4.0.
Much simpler seems to be to hook the afterRedraw event and remove the opsel select element:
jQuery("#grilla")jqGrid(
"navGrid","#paginador", {del:false,add:false,edit:false},{},{},{},
{
multipleSearch:true,
afterRedraw: function($p) {
$("select.opsel").remove();
}
}
);
see here !
//own add edit del search
jQuery("#gridTable3").jqGrid('navGrid', '#gridPager3',
{
//options
},
{
// edit options
height: 250,
reloadAfterSubmit: false,
closeAfterEdit: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// add options
height: 250,
reloadAfterSubmit: false,
closeAfterAdd: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// del options
reloadAfterSubmit: false,
closeAfterDel: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// search options
multipleSearch: true,//more search write there,don't pop
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
});