Creating an Invoice program

I have been using ApplicationCraft for a few years but sadly it is being put to rest. So my first project is to re-write my existing app.

I have the PHP side already I can populate lists with data ok.

I am going to use the BootStrap DataTable widget.

However I have been struggling for a few hours trying to get it to work.

I have tried various code and from the following link.

I can clear the tables but not populate them with any new data.

http://wiki.nsbasic.com/DataTable_(Bootstrap)

Button1.onclick=function(){
var config = {
 "aaData": [
        /* Reduced data set */
        [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ],
        [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ],
        [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ],
        [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ],
        [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ],
        [ "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", 1.8, "A" ],
        [ "Gecko", "Firefox 2", "Win 98+ / OSX.2+", 1.8, "A" ],
        [ "Gecko", "Firefox 3", "Win 2k+ / OSX.3+", 1.9, "A" ],
        [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ],
        [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ],
        [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ],
        [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ]
       ],
       "aoColumns": [
        { "sTitle": "Engine" },
        { "sTitle": "Browser" },
        { "sTitle": "Platform" },
        { "sTitle": "Version", "sClass": "center" },
        { "sTitle": "Grade", "sClass": "center" }
    ]
  };
 var table = $('#DataTable1').dataTable(config);

  //table.fnClearTable();
table.fnDestroy();
$('#DataTable1').empty()
table = $('#DataTable1').dataTable(config);
} 

Button2.onclick=function(){
//$('#DataTable1').DataTable().clear();
var table = $('#DataTable1').DataTable();

table
.clear()
.draw();
 }

Button3.onclick=function(){
var table = $('#DataTable1').DataTable();

    table.rows.add( [ {
    "name":       "Tiger Nixon222",
    "position":   "System Architect",
    "salary":     "$3,120",
    "start_date": "2011/04/25",
    "office":     "Edinburgh",
    "extn":       "5421"
 }, {
    "name": "Garrett Winters222",
    "position": "Director",
    "salary": "$5,300",
    "start_date": "2011/07/25",
    "office": "Edinburgh",
    "extn": "8422"
} ] )
.draw();
}

Button4.onclick=function(){
if ( $.fn.DataTable.isDataTable('#DataTable1') ) {
$('#DataTable1').DataTable().destroy();
 }

$('#DataTable1 tbody').empty();

// ... skipped ...

$('#DataTable1').dataTable({
  "autoWidth":false
, "info":false
, "JQueryUI":true
, "ordering":true
, "paging":false
, "scrollY":"500px"
, "scrollCollapse":true
});
}

Button5.onclick=function(){
// Quickly and simply clear a table
//$('#DataTable1').dataTable().fnClearTable();

// Restore the table to it's original state in the DOM by removing all of DataTables enhancements, alterations to the DOM   structure of the table and event listeners
$('#DataTable1').dataTable().fnDestroy();
}

Button6.onclick=function(){
$('#DataTable1').DataTable();
}

Button7.onclick=function(){
var t = $('#DataTable1').DataTable();
var counter = 1;

$('#addRow').on( 'click', function () {
    t.row.add( [
        counter +'.1',
        counter +'.2',
        counter +'.3',
        counter +'.4',
        counter +'.5'
    ] ).draw( false );

    counter++;
} );

// Automatically add a first row of data
$('#addRow').click();

}

Button9.onclick=function(){

$('#DataTable1').DataTable( {
    "ajax": {
        "url": "http://toolfolks.com/techy/array.txt",
        "dataSrc": "tableData"
    },
    "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
    ]
} );

}

Button10.onclick=function(){
var columns1 = [{title:"Name"}, {title:"Position"}, {title:"Salary"}];
data1 = [["Tiger Nixonqqq", "System Architectqq", "$320,800"], ["Garrett Wintersqq", "Accountantqq", "$170,750"]];
DataTable1.settings.columns = columns1
DataTable1.settings.data = data1
DataTable1.build()

}

Button11.onclick=function(){
var table = $('#DataTable1').DataTable();
table.destroy();
$('#DataTable1').empty();
table.rows.add( [ {
    "name":       "Tiger Nixon",
    "position":   "System Architect",
    "salary":     "$3,120"
}, {
    "name": "Garrett Winters",
    "position": "Director",
    "salary": "$5,300"
} ] )
.draw();

}

Cheers

Steve Warby

Sorry …

The reply I get when attempting to add data is :slight_smile:
hfunc.js
TypeError: url.lastIndexOf is not a function. (In ‘url.lastIndexOf(’/’)’, ‘url.lastIndexOf’ is undefined).
line 3923 column 49

Also how do I put the table in edit mode?

i.e. be able to change the data then output the data?

Cheers

Steve Warby

The error that you are encountering is actually an error in the error handler. That obscures what the real problem is.

An updated build of AppStudio is here:

Give that a try - let’s see if it shows a better error message.

You’ll need to consult the DataTables documentation for this. It’s pretty extensive - there is a lot to DataTables:

https://datatables.net/

I’m on a Mac.

cheers

Steve Warby

It looks like you have to buy the editor. Is this correct ?

If so what is the procedure to get this working in app Studio.

Cheers

Steve Warby

Here you go!

I have the following code:

If I empty or destroy the tables then apply ’ change data’ The tables are restored with the original data not the 'swapped data;

If I add rows I get:

hfunc.js
TypeError: url.lastIndexOf is not a function. (In ‘url.lastIndexOf(’/’)’, ‘url.lastIndexOf’ is undefined).
line 3923 column 57

 var data1 = [
["Tiger Nixon1111", "System Architect", "Edinburgh"],
["Garrett Winters1111", "Accountant", "Tokyo"],
["Ashton Cox1111", "Junior Technical Author","England"]
];
var data2 = [
["Tiger Nixon222", "System Architect", "Edinburgh"],
["Garrett Winters222", "Accountant", "Tokyo"],
["Ashton Cox222", "Junior Technical Author","England"]
];

var columns1 = [{
title: "Name"
}, {
title: "Position"
}, {
title: "Office"

}];

function updateTable1() {
DataTable1.settings.columns = columns1;
DataTable1.settings.data = data1;
DataTable1.build();
}
function updateTable2() {
DataTable2.settings.columns = columns1;
DataTable2.settings.data = data2;
DataTable2.build();
}

function changeTable1() {
DataTable1.settings.columns = columns1;
DataTable1.settings.data = data2;
DataTable1.build();
}
function changeTable2() {
DataTable2.settings.columns = columns1;
DataTable2.settings.data = data1;
DataTable2.build();
}
function Main() {
updateTable1();
updateTable2();
}

Button3.onclick=function(){
changeTable1();
changeTable2();
}

btnAddRows.onclick=function(){
var table = $('#DataTable1').DataTable();
var table2 = $('#DataTable2').DataTable();
table.row.add( {
    "Name":       "Tiger Nixonadded11111",
    "Position":   "System Architect",
    "Office":     "$3,120"
} ).draw();



table2.row.add( {
    "Name":       "Tiger NixonAdded2222",
    "Position":   "System Architect",
    "Office":     "$3,120"
} ).draw();
}
 btnEmpty.onclick=function(){
 var table = $('#DataTable1').DataTable();

table
.clear()
.draw();

var table = $('#DataTable2').DataTable();

table
.clear()
.draw();

}

btnDestroy.onclick=function(){
var table = $('#DataTable1').DataTable();
table.destroy();
$("#DataTable1").empty();
var table2 = $('#DataTable2').DataTable();
table2.destroy();
$("#DataTable2").empty();

}

Are you using the new build of AppStudio? Did you do a full deploy? You shouldn’t be seeing the same error as before.

Hi Guys,
I am on the latest version you sent me.

I think the issue is the format of the data returned.
I have validated this as valid Json data.

I am trying to populate the DataTable using the following code.

Is the issue how to pass the data here:

DataTable1.settings.data = req.responseText ;//JSON.parse(dataJson2);

i.e. how do I pass the data in the correct format.

I have tried various parse / stringify etc.

I am getting this error:

TypeError: url.lastIndexOf is not a function. (In 'url.lastIndexOf('/')', 'url.lastIndexOf' is undefined).
line 3923 column 57

If I use some data formatted as

var data1 = [
    ["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800"],
    ["Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750"]
]

I can populate the dataTable with

      var dataJson = JSON.stringify(data1);
      var table = $("#DataTable1").DataTable();
        table.clear();

        DataTable1.settings.data = JSON.parse(dataJson);
        setTimeout(loadTable, 50);

    Button1.onclick=function(){
    req = Ajax("http://www.toolfolks.com/techy/someData.php", "GET", txtSend.value, done);
    }


     function done() {
     if (req.status == 200) { //success
          htmResponse.innerHTML = req.responseText;
          console.log('This is the data'+req.responseText);
          // add to grid
        var table = $("#DataTable1").DataTable();
        table.clear();
        var dataJson2 = JSON.stringify(htmResponse.innerHTML);
        DataTable1.settings.data = req.responseText ;//JSON.parse(dataJson2);
        setTimeout(loadTable, 50);
       }
          else {//'failure
          htmResponse.innerHTML=req.err;
          }
  
    }

    function loadTable() {
      var table = $("#DataTable1").DataTable();
      table.rows.add(DataTable1.settings.data).draw();
    }
[{"invoice_no":"704523213-6","product_name":"Thyroidinum, Baryta carb., Berber. vulg., Bryonia, Calc. carb., Cinchona, Conium, Digitalis, Ferrum picricum, Hydrastis, Iodium, Lycopodium, Nux vom., Pareira, Pulsatilla, Sabal, Selenium, Staphysag., Thuja occ.,Trifolium pratense, Echinacea, Lappa, Solid","delivery_status":"0","pin_code":"9616"},{"invoice_no":"873879067-X","product_name":"OCTINOXATE and TITANIUM DIOXIDE","delivery_status":"0","pin_code":"90"},{"invoice_no":"888174546-1","product_name":"coffee bean","delivery_status":"0","pin_code":"5"},{"invoice_no":"742900466-0","product_name":"Bupropion Hydrochloride","delivery_status":"1","pin_code":"2"},{"invoice_no":"505396330-4","product_name":"Caffeine","delivery_status":"1","pin_code":"8313"},{"invoice_no":"344082937-5","product_name":"dimethicone","delivery_status":"1","pin_code":"816"},{"invoice_no":"824881650-8","product_name":"Oxazepam","delivery_status":"0","pin_code":"6944"},{"invoice_no":"793629004-4","product_name":"estradiol","delivery_status":"0","pin_code":"536"},{"invoice_no":"751800320-1","product_name":"SULFUR,SULFACETAMIDE SODIUM","delivery_status":"1","pin_code":"73"},{"invoice_no":"124982586-5","product_name":"Miconazole nitrate","delivery_status":"1","pin_code":"8"},{"invoice_no":"393625687-X","product_name":"dextromethorphan HBr, doxylamine succinate","delivery_status":"1","pin_code":"94271"},{"invoice_no":"533099566-3","product_name":"BENZALKONIUM CHLORIDE","delivery_status":"0","pin_code":"38"},{"invoice_no":"415234478-4","product_name":"acetaminophen, dextromethorphan hydrobromide and doxylamine succinate","delivery_status":"0","pin_code":"2"},{"invoice_no":"137027302-9","product_name":"PULSATILLA, ALLIUM CEPA, ARSENICUM ALBUM, NUX VOMICA, EUPHRASIA OFFICINALIS, SABADILLA, STICTA PULMONARIA, ARALIA RACEMOSA, CUPRUM METALLICUM","delivery_status":"1","pin_code":"72"},{"invoice_no":"428527283-0","product_name":"levofloxacin","delivery_status":"1","pin_code":"60"},{"invoice_no":"271939674-5","product_name":"Phenytoin","delivery_status":"0","pin_code":"7903"},{"invoice_no":"847229680-6","product_name":"Glipizide","delivery_status":"1","pin_code":"41"},{"invoice_no":"862907237-7","product_name":"methylphenidate hydrochloride","delivery_status":"1","pin_code":"23"},{"invoice_no":"092319365-0","product_name":"bisacodyl","delivery_status":"1","pin_code":"4"},{"invoice_no":"357948877-5","product_name":"hydrocodone bitartrate and ibuprofen","delivery_status":"1","pin_code":"78857"},{"invoice_no":"126264383-X","product_name":"Bisacodyl","delivery_status":"1","pin_code":"61007"},{"invoice_no":"822256216-9","product_name":"Treatment Set TS346876","delivery_status":"0","pin_code":"42"},{"invoice_no":"448501691-9","product_name":"Alcohol","delivery_status":"0","pin_code":"58641"},{"invoice_no":"486144265-6","product_name":"Carvedilol","delivery_status":"1","pin_code":"9"},{"invoice_no":"973277310-3","product_name":"buspirone hydrochloride","delivery_status":"1","pin_code":"41"},{"invoice_no":"615440246-5","product_name":"Carvedilol","delivery_status":"0","pin_code":"84"},{"invoice_no":"930597430-9","product_name":"TERBUTALINE SULFATE","delivery_status":"0","pin_code":"41"},{"invoice_no":"153411247-2","product_name":"Oak White","delivery_status":"0","pin_code":"21"},{"invoice_no":"627228036-X","product_name":"VERAPAMIL HYDROCHLORIDE","delivery_status":"0","pin_code":"69"},{"invoice_no":"302659823-2","product_name":"Ceftriaxone Sodium","delivery_status":"0","pin_code":"368"},{"invoice_no":"531848284-8","product_name":"glipizide","delivery_status":"1","pin_code":"7"},{"invoice_no":"086245636-3","product_name":"factor ix complex","delivery_status":"1","pin_code":"80"},{"invoice_no":"987178075-3","product_name":"Ceftriaxone Sodium","delivery_status":"1","pin_code":"648"},{"invoice_no":"561582077-2","product_name":"Pyrithione Zinc","delivery_status":"0","pin_code":"0"},{"invoice_no":"235966890-0","product_name":"Agnus castus, Arnica montana, Baryta carbonica, Caladium seguinum, Kali bromatum, Lycopodium clavatum, nuphar luteum, Nux vomica, Onosmodium virginianum, Phosphoricum acidum, Picnicum acidum, Selenium metallicum","delivery_status":"1","pin_code":"84009"},{"invoice_no":"247885358-2","product_name":"LATANOPROST","delivery_status":"0","pin_code":"233"},{"invoice_no":"271660434-7","product_name":"Diethylpropion hydrochloride","delivery_status":"1","pin_code":"54452"},{"invoice_no":"813320093-8","product_name":"Magnesium Citrate","delivery_status":"1","pin_code":"2"},{"invoice_no":"113150242-6","product_name":"Silver Maple","delivery_status":"1","pin_code":"93"},{"invoice_no":"311237529-7","product_name":"ALCOHOL","delivery_status":"1","pin_code":"56532"},{"invoice_no":"133196175-0","product_name":"Loperamide HCl","delivery_status":"1","pin_code":"9990"},{"invoice_no":"346713651-6","product_name":"Amitriptyline Hydrochloride","delivery_status":"1","pin_code":"8"},{"invoice_no":"380694458-X","product_name":"acetaminophen","delivery_status":"1","pin_code":"617"},{"invoice_no":"151137649-X","product_name":"OCTINOXATE and TITANIUM DIOXIDE","delivery_status":"0","pin_code":"70699"},{"invoice_no":"869299262-3","product_name":"DIPHENHYDRAMINE HYDROCHLORIDE","delivery_status":"1","pin_code":"18"},{"invoice_no":"289291592-9","product_name":"Danazol","delivery_status":"0","pin_code":"570"},{"invoice_no":"284994139-5","product_name":"simvastatin","delivery_status":"1","pin_code":"2597"},{"invoice_no":"445209665-4","product_name":"TETRAHYDROZOLINE HYDROCHLORIDE","delivery_status":"1","pin_code":"9527"},{"invoice_no":"227399116-9","product_name":"Benzalkonium Chloride","delivery_status":"1","pin_code":"788"},{"invoice_no":"714837287-9","product_name":"AVOBENZONE, OCTINOXATE,OCTISALATE","delivery_status":"1","pin_code":"118"},{"invoice_no":"133949701-8","product_name":"escitalopram","delivery_status":"1","pin_code":"3"},{"invoice_no":"991791431-5","product_name":"Aluminum Zirconium Tetrachlorohydrex GLY","delivery_status":"1","pin_code":"5"},{"invoice_no":"529683170-5","product_name":"ganciclovir sodium","delivery_status":"1","pin_code":"9"},{"invoice_no":"842657445-9","product_name":"Acetaminophen","delivery_status":"0","pin_code":"670"},{"invoice_no":"785100365-2","product_name":"Western Water Hemp","delivery_status":"1","pin_code":"82324"},{"invoice_no":"882329081-3","product_name":"Doxycycline Hyclate","delivery_status":"1","pin_code":"763"},{"invoice_no":"230796197-6","product_name":"ALCOHOL","delivery_status":"1","pin_code":"63477"},{"invoice_no":"541346259-X","product_name":"losartan potassium and hydrochlorothiazide","delivery_status":"0","pin_code":"800"},{"invoice_no":"973060608-0","product_name":"Acetaminophen, Phenylephrine HCl","delivery_status":"1","pin_code":"12984"},{"invoice_no":"563841670-6","product_name":"Mometasone furoate monohydrate","delivery_status":"1","pin_code":"16"},{"invoice_no":"340186652-4","product_name":"Morphine sulfate","delivery_status":"1","pin_code":"396"},{"invoice_no":"741830611-3","product_name":"ZINC OXIDE","delivery_status":"1","pin_code":"804"},{"invoice_no":"542955494-4","product_name":"ALPRAZOLAM","delivery_status":"1","pin_code":"4"},{"invoice_no":"864090158-9","product_name":"Nitrous Oxide","delivery_status":"1","pin_code":"47"},{"invoice_no":"079288528-7","product_name":"TRICLOSAN","delivery_status":"0","pin_code":"134"},{"invoice_no":"358384712-1","product_name":"Mirtazapine","delivery_status":"0","pin_code":"51"},{"invoice_no":"732437456-5","product_name":"calcium carbonate","delivery_status":"0","pin_code":"742"},{"invoice_no":"344524760-9","product_name":"Mineral Oil","delivery_status":"0","pin_code":"5321"},{"invoice_no":"412917237-9","product_name":"Dextromethorphan HBr","delivery_status":"0","pin_code":"6223"},{"invoice_no":"742834065-9","product_name":"Chamomilla, Myrrha, Rosmarinus, Ruta, Symphytum, Antimon Tart, RSV.","delivery_status":"1","pin_code":"70198"},{"invoice_no":"582729740-2","product_name":"Triclosan","delivery_status":"0","pin_code":"386"},{"invoice_no":"599415748-1","product_name":"Eucalyptus (Blue Gum) Eucalyptus globulus","delivery_status":"1","pin_code":"50498"},{"invoice_no":"218164196-X","product_name":"Thioridazine Hydrochloride","delivery_status":"0","pin_code":"2809"},{"invoice_no":"889690163-4","product_name":"CLOTRIMAZOLE","delivery_status":"1","pin_code":"24214"},{"invoice_no":"072490809-9","product_name":"Triamterene and Hydrochlorothiazide","delivery_status":"0","pin_code":"2"},{"invoice_no":"736005670-5","product_name":"lisdexamfetamine dimesylate","delivery_status":"0","pin_code":"51477"},{"invoice_no":"668774669-3","product_name":"Esterified Estrogens and Methyltestosterone","delivery_status":"1","pin_code":"4841"},{"invoice_no":"290961790-4","product_name":"Acetaminophen, Chlorpheniramine maleate, Dextromethorphan HBr, Phenylephrine HCl","delivery_status":"0","pin_code":"298"},{"invoice_no":"259230387-1","product_name":"PREGABALIN","delivery_status":"0","pin_code":"1648"},{"invoice_no":"880366143-3","product_name":"Chaetomium globosum","delivery_status":"1","pin_code":"1"},{"invoice_no":"891173758-5","product_name":"CLOVE","delivery_status":"1","pin_code":"7201"},{"invoice_no":"072553405-2","product_name":"Acetaminophen","delivery_status":"0","pin_code":"34452"},{"invoice_no":"316716477-8","product_name":"Apis Belladonna Mercurius","delivery_status":"1","pin_code":"975"},{"invoice_no":"179222518-0","product_name":"methylphenidate hydrochloride","delivery_status":"1","pin_code":"0"},{"invoice_no":"362689132-1","product_name":"Doxazosin Mesylate","delivery_status":"1","pin_code":"2731"},{"invoice_no":"127180182-5","product_name":"Calcium Carbonate","delivery_status":"0","pin_code":"56693"},{"invoice_no":"889833147-9","product_name":"Salicylic Acid","delivery_status":"0","pin_code":"46"},{"invoice_no":"835056640-X","product_name":"ethanol","delivery_status":"1","pin_code":"926"},{"invoice_no":"068110653-0","product_name":"SODIUM MONOFLUOROPHOSPHATE","delivery_status":"0","pin_code":"6"},{"invoice_no":"082635876-4","product_name":"Sulfamethoxazole and Trimethoprim","delivery_status":"0","pin_code":"33"},{"invoice_no":"277729706-1","product_name":"doxepin hydrochloride","delivery_status":"0","pin_code":"4570"},{"invoice_no":"614260216-2","product_name":"Meropenem","delivery_status":"1","pin_code":"1703"},{"invoice_no":"694172798-5","product_name":"Amphotericin B","delivery_status":"0","pin_code":"3"},{"invoice_no":"894328008-4","product_name":"Western Juniper","delivery_status":"0","pin_code":"49628"},{"invoice_no":"966169677-2","product_name":"Avobenzone, Homosalate, Octisalate, Octocrylene, and Oxybenzone","delivery_status":"0","pin_code":"1396"},{"invoice_no":"086967433-1","product_name":"Pemetrexed disodium","delivery_status":"0","pin_code":"69638"},{"invoice_no":"902504964-8","product_name":"BENZOYL PEROXIDE","delivery_status":"0","pin_code":"7"},{"invoice_no":"443655470-8","product_name":"risperidone","delivery_status":"1","pin_code":"11591"},{"invoice_no":"132374458-4","product_name":"OXYGEN","delivery_status":"1","pin_code":"6233"},{"invoice_no":"286421306-0","product_name":"Allergenic Extracts Alum Precipitated","delivery_status":"1","pin_code":"128"}]

I cleaned up your code by putting triple ticks (```) before and after the code blocks.

I’m interested in the error message you are getting. Does anything show in the console?

Hi,

I am using this project to test.

getTest.nsx (33.6 KB)

www.toolfolks.com/getTest

The console errors are the same as the alert.

I think the issue is the ‘mapping’ / format of the returned data.

I have tried various methods but can’t get the data to show in the grid.

Cheers

Steve Warby

Thanks! Yes, there is indeed another error which is causing this. The DataTables control is throwing a non standard error message. It reads:

“DataTables warning: table id=DataTable1 - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Just posted a test build of AppStudio with improved error handling. It now handles DataTable’s non standard error messages.

Hi Guys finally got there…
Thanks for the help so far
I got some info from

So I was not doing the mapping correctly then I finally had to use JSON.parse on the data.

so I changed the PHP code to

 $query5 = "SELECT * ";  //intensionaly * to fetch all columns
 //$query5 = "SELECT Name,Position,Salary ";  //intensionaly * to fetch all columns
 $query5.=" FROM test ORDER by id ASC";


if ($result = mysqli_query($mysqli, $query5)) {
$out = array();

while ($row = $result->fetch_assoc()) {
$out[] = $row;
//$out[] = $row['Name'];
//$out[] = $row['Position'];
//$out[] = $row['Salary'];

}
}
 /* encode array as json and output it for the ajax script*/
//echo $query5;
echo json_encode($out);
//var_dump($result);

I then use

Button1Copy.onclick=function(){
req = Ajax("http://www.toolfolks.com/techy/getTest.php", "GET", txtSend.value, done2);
}

function done2() {
 if (req.status == 200) { //success
      //alert('data back');
      dataReturned = JSON.parse(req.responseText);
      htmResponse.innerHTML = req.responseText;
      $("#DataTable1").dataTable().fnDestroy();
    $('#DataTable1').DataTable( {
    data: dataReturned,
    columns: [
        { data: "Name" },
        { data: "Position" },
        { data: "Salary" }
                  ]
    } );
      
 
}
      else {//'failure
      htmResponse.innerHTML=req.err;
      }

}

So onwards & upwards…

The next phase is to use the grid in an editable format.

Is this what I have to purchase from here https://editor.datatables.net/ and if so what magic do I have to perform in appStudio to get this working.

Cheers

Steve Warby

Onward and upwards,

I have now got various display types in the cells ( so I am not sure what the dataTable editor offers) .
sample here www.toolfolks.com/getTest

local one is:

btnLocal.onclick=function(){
    data1 =  [["Tom","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Andy","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["John","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul4","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul5","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul6","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul7","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul8","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"]]
    $("#DataTable1").dataTable().fnDestroy();
    $('#DataTable1').empty();
    $('#DataTable1').DataTable( {
    data: data1,
    columns: [
        { data: 0 },
        { data: 1 },
        { data: 2 },
        {data: 3}
                  ]
    } );
}

local 2 is:

btnLocal2.onclick=function(){
  data1 =  [["Tom","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Andy","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["John","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul4","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul5","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul6","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul7","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul8","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"]]
  $("#DataTable1").dataTable().fnDestroy(); 
  $('#DataTable1').empty();
  $('#DataTable1').dataTable( {
  data: data1,

        "columnDefs": [
        {
        "title" : 'Salary',
        "targets": 2,
        "data": 2,
        "render": function (data, type, full, meta ) 
                      {
       return '<input type="text" name="'+data+'" value = '+data+'>'
                      }
        },
        { 
        "title" : 'Link',
        "targets": 3,
        "data": 3,
        "render": function ( data, type, row, meta ) 
                    {
        return '<img src="'+data+'" style="height:50px;width:50px;"/>'
                    }
        },
        {
        "title" : 'Position',
        "targets": 1,
        "data": 1,
        "render": function ( data, type, row, meta ) 
                    {
        return '<input type="text" name="'+data+'" value = '+data+'>'
                    }
        },
        { 
        "title" : 'Mane',
        "targets": 0,
        "data": 0,
        "render": function ( data, type, row, meta ) 
                    {
        return '<input type="text" name="'+data+'" value = '+data+'>' 
                      }
        },
        { 
        "targets": 4,
        "data": "Name",
        "render": function ( data, type, row, meta ) 
                    {
        return '<input type="button"  value = click Me>' 
                      }
        }
  ]
} );

}

I now need to do the following :slight_smile:

  1. Change data in the dataTable and export back out as Json ( or something I can play with). I have the code from here
    https://datatables.net//forums/discussion/41773
    Details here
    https://datatables.net/extensions/buttons/
    But it says that the ‘buttons’ extensions need to be installed. ( are they? if not is it possible to add these ).

  2. Once in the cells that have an text input using

    “render”: function (data, type, full, meta )
    {
    return ‘’
    }

From the DataTable example I have the following:

DataTable1.onclick = function(event) {
if (typeof(event.target._DT_CellIndex) != "object") {
    return;
}
var row, col;
row = event.target._DT_CellIndex.row;
col = event.target._DT_CellIndex.column;
NSB.MsgBox("Click on " + row + ", " + col + ". Value is '" + data1[row][col] + "'.");
};

I get the value if I click on the cell outside the input box but not if I click in the input box.

How do I use or create an event for leaving the cell or the input ?

Cheers

Steve Warby