I have this class:
function Clazz() {
this.id;
this.description;
}
Clazz.prototype._insert = function(_description, _success, _error) {
this.description = _description;
$.ajax({
type : "PUT",
url : "api/route",
data : JSON.stringify(this),
dataType : "json",
contentType : "application/json;charset=UTF-8",
success : function() {
_success($("#message"), 'OK');
},
error : function() {
_error($("#message"), 'FAIL');
}
});
};
Clazz.prototype._findAll = function(_callback) {
$.ajax({
type : "GET",
url : "api/route",
dataType : "json",
success : function(data) {
_callback(data);
}
});
};
On the button click, I have this:
var clazz = new Clazz();
clazz._insert($("#description").val(), success, error);
clazz._findAll(loadCallback);
Below the loadCallback method:
function loadCallback(data){
var oTable = $('#table').dataTable({
"bRetrieve": true,
"bDestroy" : true,
"bFilter" : false,
"bLengthChange" : false,
"bInfo" : false,
"sDom" : "<'row'<'span5'l><'span5'f>r>t<'row'<'span5'i><'span5'p>>",
"sPaginationType" : "bootstrap",
"oLanguage" : {
"sProcessing" : "Loading ...",
"sZeroRecords" : "No records",
"oPaginate" : {
"sNext" : "",
"sPrevious" : ""
}
},
"iDisplayLength" : 4,
"aaData" : data,
"aoColumnDefs" : [
{ "aTargets" : [0], "mData" : "description", "sTitle" : "My Data" },
{ "aTargets" : [1],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img01.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [2],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img02.png" style="height: 20px; width: 20px;"/>';
}
},
{ "aTargets" : [3],
"sWidth" : "20px",
"mData" : "id",
"bSortable" : false,
"mRender" : function ( data ) {
return '<img src="img/img03.png" style="height: 20px; width: 20px;"/>';
}
}
],
"fnHeaderCallback" : function( nHead ) {
$(nHead.getElementsByTagName('th')[0]).attr("colspan","4");
for(var i = 1; i <= 3; i++){
$(nHead.getElementsByTagName('th')[1]).remove();
}
},
"fnRowCallback" : function( nRow ) {
$(nRow.getElementsByTagName('td')[1]).attr("width","20px");
$(nRow.getElementsByTagName('td')[2]).attr("width","20px");
$(nRow.getElementsByTagName('td')[3]).attr("width","20px");
}
});
oTable.fnClearTable();
oTable.fnAddData(data);
oTable.fnDraw();
}
I want that the method clazz._findAll(loadCallback); only execute after the clazz._insert finish.
I already tried $.when but it did not work.
$.when should work if clazz._insert returns the $.ajax function call (which it currently does not).
If you return the $.ajax call, you should be able to do something like:
$.when(clazz._insert(...stuff...)).then(clazz._findAll(...stuff...));
Might be a good idea to double-check the documentation on deferred objects.
I solved doing this:
Putting return $.ajax(...stuff...) in the insert method
Using
$.when(clazz._insert($("#description").val())).done(
function(){
clazz._findAll(loadCallback);
}
);
I had to call the _findAll inside an anonimous function.
Related
function PERSYARATAN() {
$('#persyaratan_table').DataTable({
"columns": [{
"orderable" : true,
"class" : "text-center",
"width" : "5%",
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : false,
"class" : "text-left"
},
{
"orderable" : true,
"class" : "text-left",
// "class" : "hide_column",
},
{
"orderable" : true,
"class" : "text-left"
},
],
order: [[3, 'asc']],
rowgroup: {
dataSrc: 3
},
"processing": true,
"serverSide": true,
"autoWidth" : false,
"searching" : true,
"stateSave" : true,
"bDestroy" : true,
"iDisplayLenght" : 10,
"sPaginationType": "simple_numbers",
"language": {
"url": "../plugins/datatables/Indonesian.json"
},
"ajax": function (data, callback, settings) {
$.ajax({
"url" : "/persyaratanperaturanizin",
"type" : "GET",
"data" : data,
"error" : function(xhr) {
ERROR_ALERT(xhr);
callback({
draw: 1,
data: [],
recordsTotal: 0,
recordsFiltered: 0
});
},
"success": function (data) {
var respons = data.respons;
if (respons.success == 1) {
no = respons.data.data.lenght;
callback(respons.data);
}
}
});
}
});
}
Thats my js code datatable
i want to use row group datatable and i get this error
Uncaught TypeError: Cannot set properties of undefined (setting 'RowGroup')
https://i.stack.imgur.com/W6STt.png
i already call
https://cdn.datatables.net/rowgroup/1.1.3/css/rowGroup.bootstrap4.min.css
and
https://cdn.datatables.net/rowgroup/1.1.3/js/dataTables.rowGroup.min.js
how fix this error
How to refresh the Datatable, When new Json data is sent
POST request Receives data , which is sent to LoadTable function to populate the datatable.
function initializeTable(){
$("#submitbutton").on(
'click',
function(){
$.ajax({
type : 'POST',
url : 'rest/log/events',
data : {
fromTime : $("#fromTime-filter").val(),
toTime : $("#toTime-filter").val(),
Text : $("#search-filter-input").val()
},
success : function(data) {
loadTable(data);
},
error : function(jqXHR, textStatus, errorThrown) {
showAjaxError(jqXHR, textStatus, errorThrown,
$("#error-msg"));
}
});
});
}
'data' is passed to Load function, which loads the data to a table correctly the first time.
When i submit the POST request the second time, i see New 'data' in the browser console, but the Datatable is not refreshed.
But when i Refresh the Page(datatable is cleared) and then do a new POST, new data loads normally. I want the new data to be loaded without the need to refresh the page.
function loadTable(data)
{
$('#report-table').dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
}
It looks to me like you're using DataTables v1.9. Here's how I'd do it:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnUpdate(data);
}
}
Another option:
function loadTable(data)
{
var table = $('#report-table');
if ( ! $.fn.DataTable.fnIsDataTable( table[0] ) ) {
table.dataTable( {
bProcessing : true,
bJQueryUI : true,
bLengthChange : false,
bDestory : true,
bRetrieve : true,
bStateSave : true,
oTableTools: {
sRowSelect: "multi",
aButtons: [ "select_all", "select_none" ]
},
iDisplayLength : 20,
"aaData": data,
"aoColumns": [
{ "mData" : "date" },
{ "mData" : "name" },
{ "mData" : "type" },
{ "mData" : "section" }
]
} );
} else {
table.dataTable().fnDestroy();
loadTable(data);
}
}
DataTable is able to create.Now i can only able to search the column named 'No'. My requirement is to search any number of desired colums of the datatable.Is there any problem by doing like this? can anyone help?
dmhTable = $('#tableId').dataTable({
"bProcessing": true,
"bDestroy": true,
"bServerSide" : true,
"bLenthChange" : false,
"iDisplayLength" : 10,
"sAjaxSource" : "searchHistoryByFromAndToDate.html?fromDate="+ $('#txtFromDate').val() +"&toDate="+ $('#txtToDate').val(),
"oLanguage" : {
"sSearch" : "Search"
},
"aoColumns" : [{"sTitle" : "Sl No","mData" : null,"aTargets": [ 0 ],
"fnRender" : function(obj) { var columnIndex = obj.oSettings._iDisplayStart + obj.iDataRow+1
return columnIndex;
}
},
{"sTitle" : "ID","mData" : "ID", "bSearchable" : false,"bVisible":false},
{"sTitle" : " No","mData" : "No", "bSearchable" : true},
{"sTitle" : " Type","mData" : "Type", "bSearchable": true},
{"sTitle" : "Message","mData" : "Message", "bSearchable": true}
],
"fnServerData" : function(sSource, aoData, fnCallback) {
$.ajax({
"dataType" : 'json',
"type" : "GET",
"url" : sSource,
"data" : aoData,
"success" : fnCallback
});
},
"sPaginationType" : "full_numbers"
});
I'd like to use Selenium or other package to automatically click the "Copy" button on one web page.
It seems that the button is generated by Javascript. Is it possible to do so? Thanks in advance!
<script src="media/portal/js/table-maker.js" type="text/javascript"></script>
Here is the piece of code in table-maker.js related to the "Copy" button:
this.generateEntityTable = function(entityName, ajaxDataProperty,
urlSuffix, objectHeadings, objectFields, hiddenFields,
tableSelector, tableId,
emptyMessage) {
if (!emptyMessage) {
emptyMessage = "No data available in table";
}
var oTable = $(tableSelector);
var tableElt = oTable[0];
var tableSource = {
"sourceType" : "json",
"structure" : {
"headings" : objectHeadings,
"fields" : objectFields
}
};
TableUtils.buildTableHtml(tableElt, tableSource.structure.headings);
var tableToolsProps = null;
if ('portalFile' == entityName) { // table does not allow row selection.
tableToolsProps = {
"aButtons" : []
};
} else if ('bspsample' == entityName) {
tableToolsProps = {
"aButtons" : [{
"sExtends": "copy",
"mColumns": "all"
},
{
"sExtends": "csv",
"mColumns": "all"
},
{
"sExtends": "xls",
"mColumns": "all"
}],
"sSwfPath" : "media/table-tools-2.1.5/media/swf/copy_csv_xls.swf"
};
} else {
tableToolsProps = {
"sRowSelect": "single",
"aButtons" : []
};
}
// this is to prevent DataTables from putting warnings or errors in an alert box.
$.fn.dataTableExt.sErrMode = 'throw';
try {
oTable.dataTable({
"bDestroy" : true,
"bRetrieve" : true,
"bJQueryUI" : true,
"bProcessing" : true,
"sPaginationType" : "full_numbers",
"sAjaxSource" : initialUrl + "rest/"+ urlSuffix,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"success": function(result){fnCallback(result);},
"failure":function(result){alert('failure');}
} );
},
"sAjaxDataProp" : ajaxDataProperty,
"aoColumns" : this.fieldsToColumnProperties(objectFields, objectHeadings,
hiddenFields, entityName, tableSelector, tableId),
"sDom": 'T<"clear">lfrtip',
"oTableTools": tableToolsProps,
"oLanguage": {
"sEmptyTable": "Please wait - Fetching records"
},
fnInitComplete: function(oSettings){
oSettings.oLanguage.sEmptyTable = emptyMessage;
$(oTable).find(".dataTables_empty").html(emptyMessage);
}
});
} catch (err) {
var messageHandler = new MessageHandler();
messageHandler.showError("Internal client error: " + err + " Unable to create table for entity: "
+ entityName);
};
// this is required for row_selected styles to work.
oTable.addClass('display');
oTable.show(); // in case it was hidden
return oTable;
};
Here is my code, its supposed to prevent node copy when using ctrl key, but it still allows copy and doesn't prevent it.
I use "copy_modifier" : false as per the documentation - any idea why it doesn't work?
I am using the stable version "jsTree 1.0-rc3" downloaded via the big download button on the website only a few days ago.
$(function () {
$("#jsTree")
.jstree({
"plugins" : ["themes","html_data","ui","crrm","hotkeys","types","dnd","contextmenu"], contextmenu: {items: customMenu}
//"core" : { "initially_open" : [ "node_root" ] }
,"types" : {
"valid_children" : [ "group","unknowngroup" ],
"types" : {
"group" : {
"valid_children" : ["event"],
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false,
"icon" : {
"image" : "layout/img/folder.png"
},
},
"unknowngroup" : {
"valid_children" : ["event"],
"start_drag" : false,
"move_node" : false,
"delete_node" : false,
"remove" : false,
"icon" : {
"image" : "http://www.veryicon.com/icon/16/System/Pleasant/Recycle%20Bin%20e.png"
},
},
"event" : {
"valid_children" : "none",
"icon" : {
"image" : "http://ouccc.objectis.net/events/aggregator/previous/event_icon.gif"
},
"start_drag" : true,
"move_node" : true,
"delete_node" : false,
"remove" : false
}
},
"dnd" : {
"copy_modifier" : false,
"drag_check" : function (data) {
return {
after : true ,
before : true ,
inside : true
};
}
}
}
}).bind("rename.jstree", function (e, data) {
if(prefix!="")
{
commitGroupRename(data.rslt.obj.attr("id").substring(11),data.rslt.new_name);
var text= prefix + data.rslt.new_name;
$("#jsTree").jstree('rename_node', data.rslt.obj, text );
prefix="";
}
}).bind("loaded.jstree", function (event, data) {
//$("#jsTree").jstree("open_all");
}).bind("dblclick.jstree", function (event) {
var node = $(event.target).closest("li");
//var data = node.data("jstree");
if ($(node).attr('rel')=="group" && prefix =='')
{
var text = $("#jsTree").jstree('get_text',node);
prefix = text.substring(0,5);
text = text.substring(5);
$("#jsTree").jstree("rename_node", node , text );
$("#jsTree").jstree("rename",node);
}
}).bind("select_node.jstree", function (node, ref_node) {
var theRealNode = $.jstree._focused().get_selected();
if (theRealNode.attr('rel')=="group")
{
$('#btnRenameSelected').attr("disabled", false);
$('#btnRenameSelected').removeClass("ui-state-disabled");
}
else
{
$('#btnRenameSelected').attr("disabled", true);
$('#btnRenameSelected').addClass("ui-state-disabled");
}
});
});
Fixed - as you can see "dnd" is actually inside "types" scope. Doh! - will accept when so allows.