Hi everyone..

Given below is the link to my page where I have used parent-child system.
https://e-reporting.in/Data/HTC_Bill/index1.php

When I expand the first column i.e. Bill **of any row, the child table gets populated and new row could be added using Add Bill button. But when click on subsequent rows to expand them, the **Add Bill Button doesn't work as an **empty editor **without any fields do appear.

Please see and help me to get rid of the above.

Thanks & Regards
Shatrughan Sangwan

Hi I am using print button with header row column search. my code is working good but header row not going in print it is not going in pdf too. This is the example jsfiddle link

here is my js code ( Please Help me to find out where i did mistake)

my test case is http://montaj.vianor-konakovo.ru/goods1.html I had a table with gray mesh borders and I wanted black borders. In the table that was when clicking on the column heading, the font was enlarged there by visually displaying the column by which sorting is in progress. I generated css file for my purposes and pasted its contents into my CSS file-goods.css. The table cells borders became black as I wanted, however now when I click on the column heading the font is not enlarged there and I would like it to become 12px. What kind of editing is goods. css i need to produce to achieve the desired

Hello,

I would like to use Editor and the upload functionnality in order to create a simple gallery.

So, for my example, I have 2 tables.

The first one named gallery to store galleries with 3 columns:

• ID (primary key)
• "Description"
• img_id (the id for the photo)

The second one named gallery_files with 5 columns (like in the documentation) to store uploaded photos:

• id
• fileName
• fileSize
• web_path
• system_path

I just want to upload photos in specific folder, not in $_SERVER['DOCUMENT_ROOT'] like it seems to be done by default.

Can you give me the way to do it please?

I have tried to use "Custom validation" but without success (I don't really understand how to use it in fact)

If my web site is stored on 'D:/WebSite', I simply want to store my images into the following folder : $_SERVER['CONTEXT_DOCUMENT_ROOT'] . /gallery/ (so into 'D:/WebSite/gallery')

Here is a piece of code I need to modify in order to make it works. It seems quite simple but I am not able to make it works.

Editor::inst( $db, 'gallery', 'id' )
    ->fields(
        Field::inst( 'gallery.id' )
            ->validator( 'Validate::notEmpty' ),
        Field::inst( 'gallery.description' ),
        Field::inst( 'gallery.img_id' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['CONTEXT_DOCUMENT_ROOT'].'gallery/__ID__.__EXTN__' )
/*          
            ->upload( Upload::inst( 
                function ( $file, $id ) {
                    move_uploaded_file( $file['tmp_name'], $_SERVER['CONTEXT_DOCUMENT_ROOT'].'gallery/'.$id);
                    return $id;
                } )
*/
        ->db( 'gallery_files, 'id', array(
            'filename'    => Upload::DB_FILE_NAME,
            'filesize'    => Upload::DB_FILE_SIZE,
            //'web_path'    => 'galeries/'.Upload::DB_WEB_PATH,
            'web_path'    => 'gallery/__ID__.__EXTN__',
            //'system_path' => Upload::DB_SYSTEM_PATH
            'system_path' => 'D:/WebSite/gallery/__ID__.__EXTN__'
        ) )
                
        ->dbClean( function ( $data ) {
            // Remove the files from the file system
            for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
                unlink( $data[$i]['systemPath'] );
            }
     
            // Have Editor remove the rows from the database
            return true;
        })
    )
    )
    ->process( $_POST )
    ->json();

Thanks in advance for your help and have a nice day.

When I log in to my WP site as Admin no problem to show the data from DataTable, but if I log in as Subscriber nothing works.
I only get this messages:
DataTables warning: table id=table_1 - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1
I have tried to understand how to fix it, but can't understand it.
Is there anyone that can give me a hand.....

I use drawCallback to set the scroll position of the child table.

"drawCallback": function (settings){
  $('div.dataTables_scrollBody').scrollTop(TOP);
},

But it doesn't work. Can you look at my code?
I succeeded in getting the scroll position, and I set the scroll position in CreateChild
However, the scroll position is not applied.

Parent table settings

$(document).ready(function () {

    $("a").button();

    var devEditor = new $.fn.dataTable.Editor({
        //skip
    });

    var childRows = null;

    var devTable = $("#deviceTable").DataTable({
        //skip
       "initComplete": function () {
            setInterval(function () {
                childRows = devTable.rows($('.shown'));
                scrollTop = {};
                
                let childrow = $('div.dataTables_scrollBody');
                $.each(childrow, function (index, v) {
                    let id = v.childNodes[0].id;
                    let top = $($(v)).scrollTop();
                    scrollTop[id] = top;
                });
                devTable.ajax.reload(null, false);
                //Server Request Code skip
            }, 3000);
        }
    });   

    $('#deviceTable tbody').on('click', 'td.fileName', function () {
        var tr = $(this).closest('tr');
        var row = devTable.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
            tr.removeClass('highlightExpanded');
        }
        else {
            // Open this row
            createChild(row, devTable.row(this).data().SN);
            tr.addClass('shown');
            tr.addClass('highlightExpanded');
        }
    });

    devTable.on('draw', function () {
        if (childRows) {
            //let rows = childRows;
            let rows = Object.assign({}, childRows);
            // Reset childRows so loop is not executed each draw
            childRows = null;
            rows.every(function (rowIdx, tableLoop, rowLoop) {
                var row = this;
                let top = 0;
                createChild(row, devTable.row(this).data().SN);
                this.nodes().to$().addClass('shown');
            });
        }
    });
});

child table settings

var scrollTop = [];

function createChild(row, id) {
    // This is the table we'll convert into a DataTable
    let ID = "child-" + id;
    var table = $('<table class="display" width="100%" id="{0}"/>'.format(ID));

    // Display it the child row
    row.child(table).show();

    var rowdata = row.data().detail;

    let TOP = scrollTop[ID];

    // Initialise as a DataTable
    var fileTable = table.DataTable({
        //skip
        "drawCallback": function (settings) {
            //console.log('scroll ' + top);
           //$('div.dataTables_scrollBody').scrollTop(TOP);
        }
    });
}


function destroyChild(row) {
    var table = $("table", row.child());
    table.detach();
    table.DataTable().clear();

    // And then hide the row
    row.child.hide();
}

Hello, I want to build a table like the one in the picture below using this JSON Object

My research took me to this which shows me how to build dynamic tables and get nested items which is great but I am stuck on how to actually build the table, I looked into row.data but I am still not getting it.

I have a datatable with 61 columns. 3 of these columns have a few lines with so many data, that it gives a very disruptive design for the user. So I want to control the columns width of these 3 columns. I've made a simple example and it works fine, when there is 5 columns. But I can't make it work with 61 columns.

What I want is like this picture from the 5 column datatable:

But when I increase the number of columns it will only show the data on top of each other, like this:

The code for the simpel 5 columns datatable that works fine looks like this:

$(document).ready(function() {
    var table = $('#example').removeAttr('width').DataTable( {
        ajax: "../cha_php/chabudget.php",
        table: "#example",
        scrollCollapse: true,
        scrollX: true,
        columnDefs: [
        { width: "25%", targets: [1,2] }
        ],
        columns: [
            { data: "budget.nr" },
            { data: "laerer", render: "[, ].init" },//koden der kan vise flere lærere
            { data: "budget.fag" },
            { data: "budget.fordelt" },
            { data: "budget.lektioner" }
        ],
        order: [[0, 'asc']]
    } );

} );

Any ideas?

Claus

I am using Firefox 72.0.2 and even the example for vertical columns does not render correctly, they are still left on top of the Datatable.

Hi,

I'm having a hard time to get LeftJoins running with the editor.
I have two tables which should be displayed together (all values).
Model_Shop.cs is the main table and some values from Model_Main.cs should be joined/also displayed.

I tried to follow this guide: https://editor.datatables.net/manual/net/joins
but somehow I'm still getting this error: 'Unknown column 'tbl_main.id_user_edit' in 'field list''

tbl_main.id_user_edit shouldn't be accessed at all!
Only tbl_shop.id_user_edit is important in this case.
Somehow I must be understanding something wrong or overlook something.

Files are attached - to many variables to display properly in the forum.
I'd be happy if someone could help me how to display both tables at once!

Greetings
Gerrit

Greetings! My question is probably easily answered however I am relatively working in MVC as a student and have this issue so forgive me if this is a silly question - I am trying to get the value of a specific cell in a selected row in what's called a "Select Table". What do I do to get the value to a variable that I will use in Razor to create a modal card that contains some of that row data based on the ID column/cell.

For example:

ProjectID | Project Manager | Developers | Status | Description|
1 Sally Jim New Blah
2 Mike Sue Planning Bleh
3 Bob Jack Deployment YaddaYadda

When I select Row 2 I want to use the ID cell from that selected row to populate another view above the table. Make sense?

I'm receiving an error when submitting the following field in editor. Is my approach of assigning a string value to a checkbox incorrect?

"label": "user_type",
"name": "accounts.user_type",
type: "checkbox",
options: [
{
label: "Admin",
value: "admin",
}
],

hi dear
I want to create base table that have some rows
I want to create child table when I click on row on base table open a table as child blew a base table
I want to accesses to edit table in both table
and I use DT package in R
could u help me?
thx so much

Demo: https://jsfiddle.net/friek2k/fjwjfuxL/

In this demo, on first load, columnText appropriately renders the supplied html as html. However, if you try re-ordering the columns, then opening the columns dropdown again, the buttons are echoed as text - i.e. the html isn't rendered.

Any suggestions on how to remediate?

Thanks a lot

Hello all,

so I've been playing around with creating basic apps. I can use DataTables to view my tables in an app, it displays and scrolls fine, but I want to add inline editing so I can edit or add data to the table. The table is in an html file using html tags. So I have a few questions....

1. I downloaded the trial version of editor and I like the example for Simple Inline Editing, it looks good for my needs, but it uses ajax/php and i'm going to be using this in an app. Is there another similar example which can do everything in the phone without a server? I just need it to pull in the html table, and be able to edit cells.

2. i'm gonna try and use a form to add new rows to the html table, i'm guessing there's no examples of that, but thought i'd ask just in case....

3. is there a way to apply the dataTables JavaScript to a separate html file with a table in it? It only works for me if I have the table in the same html file as the dataTable JavaScript (using #example). I tried using !table.html#example but no luck.

Any help is appreciated, Thanks!

I am using DataTables-1.10.20, where I apply a search filter, so that only a set of records is visible. The question is how can I export only these visible records to excel and not all the records in the table? Is there a parameter that allows me to export or print only the visible records in the Datatable? Thank you.

Hi,
i'm using datatable plugin and works well except when i try to search records that contains apostrophs.
The problem is that the
$requestData['search']['value'])
doesn't pass the apostroph from the ajax function i have in the master file...

This is the code in the master page:

            $(document).ready(function() {
            
                    $.fn.dataTable.moment( 'DD/MM/YYYY');
                $("#search").html($("#search").html().replace(/’/g, '''));
                    var dataTable = $('#<? echo $sezione; ?>-grid').DataTable( {
                 language: { search: "Cerca" ,
                            "info": "Comuni in elenco: _TOTAL_",
                            "sLengthMenu": "Mostra _MENU_  Comuni per pagina",
                           paginate: {
                           "next": "<i class='fas fa-arrow-alt-circle-right'></i>",
                           "previous": "<i class='fas fa-arrow-alt-circle-left'></i>",
                           }
                           },
                    "processing": true,
                    "serverSide": true,
                    "stateSave": false,
                    "searching": true,
                      
                    "ajax":{
                        url :"<? echo $sezione; ?>-grid-data.php", // json datasource
                        type: "post", // method  , by default get
                        error: function(){  // error handling
                            $(".<? echo $sezione; ?>-grid-error").html("");
                            $("#<? echo $sezione; ?>-grid").append('<tbody class="<? echo $sezione; ?>-grid-error"><tr><th colspan="3">Nessun dato presente.</th></tr></tbody>');
                            $("#<? echo $sezione; ?>-grid_processing").css("display","none");
                            
                        }
                    }
                } );
    
    
        });

any help for me?
Thanks in advance

Editor Inline, input sent empty even he has value before edit
this wired because i have the same table but with diffrent parmas in other view that working fine with editor inline
in this view when i want to edit, Air_Fare_T.AirFare_Code_T always sent empty on inline edit

i have this serverSide code:

 [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
        public ActionResult GetDataAirFareTrip(int id)
        {
            var settings = Properties.Settings.Default;
            var formData = HttpContext.ApplicationInstance.Context.Request;

            using (var db = new DataTables.Database(settings.DbType, settings.DbConnection))
            {
                var editor = new DataTables.Editor(db, "Air_Fare_T", "Air_Fare_T_Id");
                editor.Where(q =>
                    q.Where("Air_Fare_T.AirFare_Costing_T_Id", "(SELECT AirFare_Costing_T_Id FROM Air_Fare_T WHERE AirFare_Costing_T_Id= " + id + ")", "IN", false)
                );
                editor.Model<ViewModel.AirFareTripEditorVM>("Air_Fare_T")
                   .Field(new Field("Air_Fare_T.Air_Fare_T_Id")
                    .Validator(Validation.Numeric())
                    .Set(false)
                )
                 .Field(new Field("Air_Fare_T.AirFare_Costing_T_Id")
                    .Validator(Validation.Numeric())
                )
                .Field(new Field("Air_Fare_T.AirFare_Code_T").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null))
                )
                .Field(new Field("Air_Fare_T.Air_Fare_T_Type").Xss(true)
                .Validator(Validation.Numeric())
                .Options(new Options()
                        .Table("AirFare_Trip_Type")
                        .Value("AirFare_Trip_Type_Id")
                        .Order("AirFare_Trip_Type.AirFare_Trip_Type_Id")
                        .Label("AirFare_Trip_Type_Name")
                )
                .SetFormatter(Format.IfEmpty(null))
                )
                .Field(new Field("Air_Fare_T.Air_Fare_T_Currency").Xss(true)
                .Validator(Validation.Numeric())
                .Options(new Options()
                        .Table("CurrencyCosting")
                        .Value("Currency_Id")
                        .Order("CurrencyCosting.Currency_Id")
                        .Label("Currency_Name")
                        )
                .SetFormatter(Format.IfEmpty(null)))
                .Field(new Field("Air_Fare_T.Air_Fare_T_Price").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null)))
                .Field(new Field("Air_Fare_T.Air_Fare_T_PAX").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null)))
                .Field(new Field("Air_Fare_T.Air_Fare_T_Total").Xss(true)
                .Validator(Validation.Numeric())
                .SetFormatter(Format.IfEmpty(null)));
                editor.Model<ViewModel.CostingAirlineEditorVM>("Costing_Airlines")
                .LeftJoin("Costing_Airlines", "Costing_Airlines.Airline_Id", "=", "Air_Fare_T.AirFare_Code_T");
                editor.Model<ViewModel.AirFareTripTypeEditorVM>("AirFare_Trip_Type")
                .LeftJoin("AirFare_Trip_Type", "AirFare_Trip_Type.AirFare_Trip_Type_Id", "=", "Air_Fare_T.Air_Fare_T_Type");
                editor.Model<ViewModel.CurrencyCostingEditorVM>("CurrencyCosting")
                .LeftJoin("CurrencyCosting", "CurrencyCosting.Currency_Id", "=", "Air_Fare_T.Air_Fare_T_Currency");

                // Post functions
                editor.PreCreate += (sender, e) =>
                {
                    var totalVal = getTotalValTrip(e.Values, id);
                    editor.Field("Air_Fare_T.Air_Fare_T_Total").SetValue(totalVal[1]);
                    editor.Field("Air_Fare_T.Air_Fare_T_Price").SetValue(totalVal[0]);


                };
                editor.PreEdit += (sender, e) =>
                {
                    var totalVal = getTotalValTrip(e.Values, id);
                    editor.Field("Air_Fare_T.Air_Fare_T_Total").SetValue(totalVal[1]);
                    editor.Field("Air_Fare_T.Air_Fare_T_Price").SetValue(totalVal[0]);


                };
                editor.Process(formData.Unvalidated.Form);
                DtResponse data = editor.Data();
                return Json(data, JsonRequestBehavior.AllowGet);
            }
        }

Can you help me.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">

Calling Ajax:
var table = $('#listRoles').dataTable({
"sAjaxSource": "${pageContext.request.contextPath}/api/roles",
"sAjaxDataProp": "",
"aoColumns": [
{ "mdata": "roleName"},
{ "mdata": "createdBy"},
{ "mdata": "dateTime"},
{ "mdata": "description"}
]

})

Result
{
"JSON": [
{
"id": 3,
"roleName": "ROLE_ADMIN",
"description": "Administrator",
"dateTime": 1581973182899,
"createdBy": "testuser"

    },
    {
        "id": 5,
        "roleName": "ROLE_DEV",
        "description": "Role for all DEV",
        "dateTime": 1582186318000,
        "createdBy": "cicero.nogueira@ecrscorp.com"
    },
    {
        "id": 1,
        "roleName": "ROLE_EMPLOYEE",
        "description": "Any employee",
        "dateTime": 1581973182899,
        "createdBy": "testuser"
    }
]

}
ERROR : TypeError: d is undefined
Page loading.
What is wrong?