B4J Question JQuery DataTable intialisation

labcold

Member
Licensed User
Longtime User
Is it possible to add the 'createdRow' trigger to the datatable setup for B4J WebSocket server datatable initialisation?

Currently I have a large interactive site running over websockets from B4J. There are a number of interactive dataTables which all work perfectly, including the modified buttons and actions. These are setup like this:
Data table Initialisation:
    Private reps as JQueryElement
    '.... lots of other code
    
    '.... in function to initialise the web page table
    
    Dim today As String=makedate(0) 'returns a date string +/- arg days
    'Report name
    Dim reportname As String = $"Current Alerts"$
    Dim repfilename As String =$"${reportname}_${today}"$
    'setup table   
    Dim pdf As Map = CreateMap("extend": "pdfHtml5", "orientation": "portrait", "pageSize": "A4", "title": repfilename)
    Dim exc As Map = CreateMap("extend": "excelHtml5", "title": repfilename)
    Dim cpy As Map = CreateMap("extend": "copy", "title": repfilename)   
    Dim csv As Map = CreateMap("extend": "csv", "title": repfilename)
    
    reps.RunMethod("dataTable", Array As Object(CreateMap("bLengthChange": False, "bPaginate": False, "sScrollY": "700px", "bInfo": True, "bAutoWidth": True, "bDestroy": True, "dom": "Bfrtip", "buttons": Array As Object(cpy, csv, exc, pdf))))

This works perfectly and the table is later updated with data from a MySQL query and all is well. Table rows are odd/even highlighted, coloured on selected and hover through CSS.

My client now wants the data table rows to be given a highlight color if one cell in the row has a certain value (ie if col 7 row 23 is 'R' then make the background RED) and this has to be done client side not server side.

I read through and tested the examples from the DataTable website and found the following which is pretty much exactly what I want:

JS table color row based on value on render:
$(document).ready(function () {
    $('#myTable').DataTable({
        createdRow: function (row, data, index) {
            if (data[7] === 'R') {
                $('td', row).eq(7).addClass('rrr');
            }
        },
    });
});

I have tried to see if i can add this as a similar srgument to the other control items for data table as follows:
Updated Setup - Doesnt Change Anything:
    reps.RunMethod("dataTable", Array As Object(CreateMap("bLengthChange": False, "bPaginate": False, "sScrollY": "700px", "bInfo": True, "bAutoWidth": True, "bDestroy": True, "dom": "Bfrtip", "buttons": Array As Object("copy", "csv", "excel",pdf),"createdRow": $"function (row, data, index) {    if (data[7] === 'R') { $('td', row).eq(7).addClass('rrr'); }, } "$)))

Can anyone help me to understand how to setup the tables using this 'createdRow' or other function?? Or maybe this is not possible???
I am quite happy to add JS to the web pages if thats necessary but it needs to render automatically as the number of columns and rows is dynamically updated from the code.
 

labcold

Member
Licensed User
Longtime User
Erel - of course with B4X Anything is possible :D
Thanks for the prompt reply.

First I tried to run this as as separate function but realized that I should set the whole table up using this not the "datetable" method.
Corrected Setup with extensions:
    ws.Eval($"$(arguments[0]).dataTable({
        paging: false,
        ordering: true,
        info: true,
        scrollY: '700px',
        destroy: true,
        dom: 'Bfrtip',
        buttons: [
        {"extend": "pdfHtml5", "orientation": "portrait", "pageSize": "A4", "title": arguments[1]},
        {"extend": "excelHtml5", "title": arguments[1]},
        {"extend": "copy", "title": arguments[1]},
        {"extend": "csv", "title": arguments[1]}
        ],
        createdRow: function (row, data, index) {
            if (data[0] === "L00001") {
                $('td', row).css('background-color', 'Red');
            }
        },
    })"$, Array(reps.Id,repfilename))
AND
of course - Perfect result :D
new screen.jpg

Thanks you so much - I just love these tools - I have done in 6 weeks single handed what a team of 4 people did in 6 months - only its working, live and customer accepted - theirs was dropped as too expensive and too many bugs :O
 
Upvote 0
Top