jQWidgets Forums

Tagged: datatable, jqwidgets datatable

This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 10 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)

Author

I want to edit rows of datatable Posts
October 21, 2014 at 3:41 am I want to edit rows of datatable #61404

hongchainan
Participant

Additionally I want to edit and save datatable’s rows data which is loaded from database by using my script.
Sample code has actioned very well,But my code don’t act. Dear sir,Help me!
Bellow is my code.

<!DOCTYPE html>
<html lang=”en”>
<head>

<title id=’Description’>DataTable with Edit Dialog. Double-Click on a Row to Open the Edit dialog</title>
<meta name=”description” content=”This sample demonstrates how we can create Edit Dialog for editing rows in jQWidgets DataTable widget.”>
<link rel=”stylesheet” href=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/styles/jqx.energyblue.css” type=”text/css” />
<link rel=”stylesheet” href=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxdatatable.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxlistbox.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxdropdownlist.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxtooltip.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxwindow.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxnumberinput.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxinput.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxcalendar.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxdatetimeinput.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/globalization/globalize.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/jqwidgets/jqxcheckbox.js”></script>
<script type=”text/javascript” src=”<?php echo base_url().Bootstrap_path;?>jqwidget/scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
// prepare the data
var source =
{
dataType: “json”,
dataFields: [
{ name: ‘ShipCountry’},
{ name: ‘ShipCity’},
{ name: ‘ShipAddress’},
{ name: ‘ShipName’},
{ name: ‘Freight’},
{ name: ‘ShippedDate’}
],
root: ‘value’,
url: “<?php echo base_url();?>index.php/datacontrol/Orderpage”,
//my add
addRow: function (rowID, rowData, position, commit) {
// synchronize with the server – send insert command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.
commit(true);
},
updateRow: function (rowID, rowData, commit) {
// synchronize with the server – send update command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
},
deleteRow: function (rowID, commit) {
// synchronize with the server – send delete command
// call commit with parameter true if the synchronization with the server is successful
// and with parameter false if the synchronization failed.
commit(true);
}

};
var dataAdapter = new $.jqx.dataAdapter(source,{
loadComplete: function () {
// data is loaded.
}
});

$(“#dataTable”).jqxDataTable(
{
width: 850,
pageable: true,
pagerButtonsCount: 10,
theme:’energyblue’,
serverProcessing: true,
editable:true,
source: dataAdapter,
filterable: true,
height: 400,
filtermode: ‘simple’,
altRows: true,
sortable: true,
columnsResize: true,
//myadd
ready: function () {
// called when the DataTable is loaded.
// init jqxWindow widgets.
$(“#orderID”).jqxInput({disabled: true, width: 150, height: 30 });
$(“#freight”).jqxNumberInput({ spinButtons: true, inputMode: ‘simple’, width: 150, height: 30 });
var countries = new Array(“Afghanistan”, “Albania”, “Algeria”, “Andorra”, “Angola”, “Antarctica”, “Antigua and Barbuda”, “Argentina”, “Armenia”, “Australia”, “Austria”, “Azerbaijan”, “Bahamas”, “Bahrain”, “Bangladesh”, “Barbados”, “Belarus”, “Belgium”, “Belize”, “Benin”, “Bermuda”, “Bhutan”, “Bolivia”, “Bosnia and Herzegovina”, “Botswana”, “Brazil”, “Brunei”, “Bulgaria”, “Burkina Faso”, “Burma”, “Burundi”, “Cambodia”, “Cameroon”, “Canada”, “Cape Verde”, “Central African Republic”, “Chad”, “Chile”, “China”, “Colombia”, “Comoros”, “Congo, Democratic Republic”, “Congo, Republic of the”, “Costa Rica”, “Cote d’Ivoire”, “Croatia”, “Cuba”, “Cyprus”, “Czech Republic”, “Denmark”, “Djibouti”, “Dominica”, “Dominican Republic”, “East Timor”, “Ecuador”, “Egypt”, “El Salvador”, “Equatorial Guinea”, “Eritrea”, “Estonia”, “Ethiopia”, “Fiji”, “Finland”, “France”, “Gabon”, “Gambia”, “Georgia”, “Germany”, “Ghana”, “Greece”, “Greenland”, “Grenada”, “Guatemala”, “Guinea”, “Guinea-Bissau”, “Guyana”, “Haiti”, “Honduras”, “Hong Kong”, “Hungary”, “Iceland”, “India”, “Indonesia”, “Iran”, “Iraq”, “Ireland”, “Israel”, “Italy”, “Jamaica”, “Japan”, “Jordan”, “Kazakhstan”, “Kenya”, “Kiribati”, “Korea, North”, “Korea, South”, “Kuwait”, “Kyrgyzstan”, “Laos”, “Latvia”, “Lebanon”, “Lesotho”, “Liberia”, “Libya”, “Liechtenstein”, “Lithuania”, “Luxembourg”, “Macedonia”, “Madagascar”, “Malawi”, “Malaysia”, “Maldives”, “Mali”, “Malta”, “Marshall Islands”, “Mauritania”, “Mauritius”, “Mexico”, “Micronesia”, “Moldova”, “Mongolia”, “Morocco”, “Monaco”, “Mozambique”, “Namibia”, “Nauru”, “Nepal”, “Netherlands”, “New Zealand”, “Nicaragua”, “Niger”, “Nigeria”, “Norway”, “Oman”, “Pakistan”, “Panama”, “Papua New Guinea”, “Paraguay”, “Peru”, “Philippines”, “Poland”, “Portugal”, “Qatar”, “Romania”, “Russia”, “Rwanda”, “Samoa”, “San Marino”, ” Sao Tome”, “Saudi Arabia”, “Senegal”, “Serbia and Montenegro”, “Seychelles”, “Sierra Leone”, “Singapore”, “Slovakia”, “Slovenia”, “Solomon Islands”, “Somalia”, “South Africa”, “Spain”, “Sri Lanka”, “Sudan”, “Suriname”, “Swaziland”, “Sweden”, “Switzerland”, “Syria”, “Taiwan”, “Tajikistan”, “Tanzania”, “Thailand”, “Togo”, “Tonga”, “Trinidad and Tobago”, “Tunisia”, “Turkey”, “Turkmenistan”, “Uganda”, “Ukraine”, “United Arab Emirates”, “United Kingdom”, “United States”, “Uruguay”, “Uzbekistan”, “Vanuatu”, “Venezuela”, “Vietnam”, “Yemen”, “Zambia”, “Zimbabwe”);
$(“#shipCountry”).jqxInput({source: countries, width: 150, height: 30 });
$(“#shipDate”).jqxDateTimeInput({ formatString: ‘d’, width: 150, height: 30 });
$(“#save”).jqxButton({ height: 30, width: 80 });
$(“#cancel”).jqxButton({ height: 30, width: 80 });
$(“#cancel”).mousedown(function () {
// close jqxWindow.
$(“#dialog”).jqxWindow(‘close’);
});
$(“#save”).mousedown(function () {
// close jqxWindow.
$(“#dialog”).jqxWindow(‘close’);
// update edited row.
var editRow = parseInt($(“#dialog”).attr(‘data-row’));
var rowData = {
OrderID: $(“#orderID”).val(), Freight: $(“#freight”).val(),
ShipCountry: $(“#shipCountry”).val(), ShippedDate: $(“#shipDate”).val()
};
$(“#dataTable”).jqxDataTable(‘updateRow’, editRow, rowData);
});
$(“#dialog”).on(‘close’, function () {
// enable jqxDataTable.
$(“#dataTable”).jqxDataTable({ disabled: false });
});
$(“#dialog”).jqxWindow({
resizable: false,
position: { left: $(“#dataTable”).offset().left + 75, top: $(“#dataTable”).offset().top + 35 },
width: 270, height: 230,
autoOpen: false
});
$(“#dialog”).css(‘visibility’, ‘visible’);
},

columns: [

{ text: ‘Ship Name’, dataField: ‘ShipName’, width: 300 },
{ text: ‘Ship Country’, dataField: ‘ShipCountry’, width: 250 },
{ text: ‘Ship City’, dataField: ‘ShipCity’, width: 150 },
{ text: ‘Ship Address’, dataField: ‘ShipAddress’}
]
});
//myadd
$(“#dataTable”).on(‘rowDoubleClick’, function (event) {
var args = event.args;
var index = args.index;
var row = args.row;
// update the widgets inside jqxWindow.
$(“#dialog”).jqxWindow(‘setTitle’, “Edit Row: ” + row.ShipName);
$(“#dialog”).jqxWindow(‘open’);
$(“#dialog”).attr(‘data-row’, index);
$(“#dataTable”).jqxDataTable({ disabled: true });
$(“#orderID”).val(row.ShipName);
$(“#freight”).val(row.ShipCountry);
$(“#shipCountry”).val(row.ShipCity);
$(“#shipDate”).val(row.ShipAddress);
});
});

</script>

October 21, 2014 at 6:53 am I want to edit rows of datatable #61416

Peter Stoev
Keymaster

Hi hongchainan,

Please post your widget questions in the appropriate Forums.

The updateRow, addRow and deleteRow callback functions of the source object are the appropriate place to synchronize your DataTable’s changes with your Database. For that purpose, you can use the jQuery Framework’s Ajax function.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com
Author

Posts

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.