I have managed to edit the pdf export but i need to align only one column

i searched in this forum and in the pdfmake documentarion but i haven't find how to do it. Please help!

My customize function is the following

              customize: function ( doc ) {
                    doc['footer']=(function(page, pages) {
                        return {
                            columns: [
                            '*',
                            {
                            alignment: 'right',
                            text: [
                            { text: page.toString(), italics: true },
                            ' de ',
                            { text: pages.toString(), italics: true }
                            ]
                            }
                            ],
                        margin: [30, 0]
                        }
                    });
                    var d = new Date();
                    var fecha = d.toLocaleDateString('es-CL');
                    var hora = d.toLocaleTimeString('es-CL');
                    doc.content.splice( 1, 0, {

                        columns: [
                            {
                                alignment: 'left',
                                text: 'Comercial del Real \n Ramón Freire 471, Rancagua \n\n',
                                bold: true,
                            },
                            {
                                alignment: 'right',
                                text: 'Fecha: '+fecha+'\nHora: '+hora+'     ',
                                margin: [ 0, 0, 40, 0 ],
                                bold: true
                            }
                        ]
                    });

                }

Can i do something like this?

doc.content[1].table.alignment = [ 'left', 'right', 'left' ];

I'm trying to make some calculations once the user submits the form to the database. I'm using the preCreate event but I'm getting this error:

<b>Notice</b>:  Undefined index: notes_total in <b>C:\xampp\htdocs...
<b>Notice</b>:  Undefined index: non_compl in <b>C:\xampp\htdocs...

Line 37 and 40

This is the PHP code:

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../php/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'documentation' )
    ->fields(
        Field::inst( 'documentation.full_name' )
           ->options('emp', 'name', 'name')
            ->validator( 'Validate::dbValues' ),
        Field::inst( 'documentation.notes_total' ),
        Field::inst( 'documentation.date' ),
        Field::inst( 'documentation.compl' ),
        Field::inst( 'documentation.office' ),
        Field::inst( 'documentation.non_compl' ),
        Field::inst( 'documentation.percent' )

    )

    ->on( 'preCreate', function ($editor, $values ) {
      $editor
          ->field( 'documentation.compl' )
          ->setValue($values['notes_total'] - $values['non_compl']);
       $editor
          ->field( 'documentation.percent' )
          ->setValue((($values['notes_total'] - $values['non_compl']) / $values['notes_total']) * 100);
  } )

    ->leftJoin( 'emp', 'emp.id', '=', 'documentation.full_name' )
    ->process( $_POST )
    ->json();

I tried using:

$values['documentation.notes_total']

But still same error

Any ideas on fixing this error? Thanks!

Hi,
i am using dataTable responsive. i am trying to add dynamically a button by press Add button in last column of row.
i can see in console new button was added but not showing in last column of first row when i click on + sign
here is my code. https://fiddle.jshell.net/6faumn44/4/

Your help will be highly appreciated. Thanks.

I have a table with about 20 columns. Two are datetime. most are simple text, but one is a large multi-line text area.

My questions are:

1. Can I exclude columns (for example the multi-line text) from the list yet have them included in the update/new bubble?

2. Can I align fields horizontally rather that vertically, for example I would like the datetime fields to be side by side?

3. Can I control the multi-line text area in the bubble so that it is a dimension-ed scroll-able text input area?

Since I am new to both datatables and editor, examples would be very helpful.

Regards,
Jim

Hi,
I use DataTables and Editor to display and edit data in a time management system.
A problem came up: on iMac computers, some columns are hidden.
This happens on an iMac with Chrome. If I try this with FireFox on the same iMac, the columns appear but there is no data.
In Chrome in inspect mode I don't see any script errors.. How can this be fixed?
Let me know,
Bert-Jan

I have a datable..But I have a problem.
I have the code below.

When I ordered the dropdowns (see image): Line code
column.order('asc').draw(false).data().unique().each( function ( d, j ) {

The list of images in the table becomes unordered.
For the table to be sorted, I have to delete this order('asc') from the code.
But I need this to sort the dropdowns.

Can you help me sort the table again?

CODE

      `var table = $('#tableModel').dataTable({
            "initComplete": function (settings, json) {
                var orderInit = this.api().order();
                this.api().columns([1, 2,3,4,5,6,7]).every( function (index) {
                    var column = this;
                    var select =  $('<select class="selectpicker"><option value="">All</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    var r = $('#tableModel tfoot tr');
                    r.find('th').each(function(){
                        $(this).css('padding', 8);
                    });

                    $('#tableModel thead').append(r);
                    $('#search_0').css('text-align', 'center');
                    // NOTE: Temporarily sort the column data before retrieving it
                    // with data() function.
                     column.order('asc').draw(false).data().unique().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );**
                } );


            },
            "pageLength": 100,
            "responsive": true,
            "destroy": true,
            "bprocessing": true,
            "bserverSide": true,
            "sAjaxSource": "assets/scripts/getAjax.php",
            "sServerMethod": "POST",
            "pagingType": "simple_numbers",
            "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
            "aaSorting": [[0, "desc"]],
            "oLanguage": {
                "sSearch": "Search",
                "sEmptyTable": "No data to display",
                "sInfo": "Showing _START_ to _END_ entries (Total: _TOTAL_)",
                "sLengthMenu": "Show _MENU_ entries",
                "sInfoFiltered": "Filtering _MAX_ entries",
                "sLoadingRecords": "Please wait - loading...",
                "sProcessing": "Processing...",
                "oPaginate": {
                    "sFirst": "First",
                    "sLast": "Last",
                    "sPrevious": "Previous",
                    "sNext": "Next"
                }
            },
            "aoColumns": [
                {"mDataProp": "Image", "bSortable": false, "bVisible": true},
                {"mDataProp": "option1", "bSortable": true, "bVisible": true},
                {"mDataProp": "option2", "bSortable": true, "bVisible": true},
                {"mDataProp": "Age", "bSortable": true, "bVisible": true},
                {"mDataProp": "option4", "bSortable": true, "bVisible": true},
                {"mDataProp": "option5", "bSortable": true, "bVisible": true},
                {"mDataProp": "option6", "bSortable": true, "bVisible": true},
                {"mDataProp": "option7", "bSortable": true, "bVisible": true},
                {"mDataProp": "Edit", "bSortable": false, "bVisible": true},
                {"mDataProp": "Id", "bSortable": true, "bVisible": false}
            ],
            "aoColumnDefs": [

                {"bSortable": true, "aTargets": [0]},
                {
                    "aTargets": [0],
                    "mRender": function (data, type, full) {



                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' +
                            '<a class="gallery-item" href=""  data-gallery>' +
                            '<img src="' + pathThumbnail + '" alt="' + data + '"/></a></div>';
                    }
                },
                {"bSortable": true, "aTargets": [1]},
                {
                    "aTargets": [1],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [2]},
                {
                    "aTargets": [2],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [3]},
                {
                    "aTargets": [3],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [4]},
                {
                    "aTargets": [4],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [5]},
                {
                    "aTargets": [5],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [6]},
                {
                    "aTargets": [6],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [7]},
                {
                    "aTargets": [7],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },

`

I dont understand how it resolve it ..can you please tell me in simple way .. i am a beginner here is a error image attached.

The responsive extension seems to malfunction a bit when I add filters to the top of column in the table header. In some cases the filter cells remain visible after the rest of the column disappears. In other cases the grid just doesn't expand to take up the entire area.

This fiddle shows the issue. If you resize the page larger and smaller you should be able to see the issue: https://jsfiddle.net/fzqo31o3/2/

This fiddle is the exact same, but with the filter row removed. It works just fine: https://jsfiddle.net/fzqo31o3/3/

Putting the filter in the table footer seems to work properly, but (at the moment) our design calls for the filters to be in the header.

$("#tabla_herramienta_prestar").empty().append(html);
var table = $('#tabla_herramienta').DataTable({
"columnDefs": [
{ "visible": false, "targets": 0 }
],
"order": [0, 'asc'],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
var rows = api.rows( {page:'current'} ).nodes();
var last=null;

                api.column([0,1,2], {page:'current'} ).data().each( function ( group, i ) {
                    if ( last !== group ) {
                        $(rows).eq( i ).before(
                            '<tr class="group"><td colspan="5">'+group+'</td></tr>'
                        );

                        last = group;
                    }
                } );
            }
        } );

        // Order by the grouping
        $('#example tbody').on( 'click', 'tr.group', function () {
            var currentOrder = table.order()[0];
            if ( currentOrder[0] === 0 && currentOrder[0] === 'asc' ) {
                table.order( [ 0, 'desc' ] ).draw();
            }
            else {
                table.order( [ 0, 'asc' ] ).draw();
            }
        } );

If I've defined a render function, does it run once each for display, filter, sort, and type? If so, is there a way to avoid the repetitive computations?

In excel like navigation inline datepicker is not setting the date (not working in examples also) properly.
Help!!

i want to change url by changing page and add the page number to the end of url for example : mysite.ir/datatable?page=2
and when i enter this url in browser the datatable render from page 2 not page 1
i want to use this feature for indexing purpose by google

Hi,

I am getting a json object response from the server but unable to render the data into columns.
Appreciate your help.

JSON OBJECT RESPONSE:
{
"CHD2": {
"POSName": "CHANDIGARH INDU. AREA-I",
"HODB": "QSR_PHASE-I_CHANDIGARH"
},
"D002": {
"POSName": "DEHRADUN-ASTLEY HALL",
"HODB": "QSR_DEHRADUN_ASTLEY"
},
"J002": {
"POSName": "VAISHALI NAGAR",
"HODB": "QSR_VAISHALI_NAGAR"
}
}

JQUERY SCRIPT

<script>
    $(document).ready(function() {
    console.log('Initializing tables...');
    var aaData = [];
        $('#dataTables-example').DataTable({
            responsive: true,
            processing: true,
            serverSide: true,
            data : aaData,
            ajax: {
                url:'http://localhost:81/reporting/outletList.php',
                type:'POST',
                dataType:'json',
                dataSrc : "",
                error: function(errorThrown){
                    alert(errorThrown);
                    alert("There is an error with AJAX!");
                },
            "success": function(data) {
                                console.log(data);
                aaData.push([
                        data['CHD2'].POSName,
                        data['CHD2'].HODB
                    ]);
                aaData.push([
                    data['D002'].POSName,
                    data['D002'].HODB
                ]);
                data = aaData;
                console.log(data);
            }},
            /*columns: [
                { data: "POSName"},
                { data: "HODB"}
            ],*/
            "language": {
            "zeroRecords": "No records to display"
            }
            })
        });
    </script>

Still it's not working. JSON Object response is there in the developer tool of Chrome but data is not getting populated in the table.

Hi guys,
I have an issue with child row, I have a table and I have child rows inside it and the child row table has text fields, the issue is I cannot write anything on the text fields, thanks

I ask you and please you for help me for small source code for - button click to change value:

1. example - this is working

$('a.editor_create').on('click', function (e) {
                    e.preventDefault();
                    editor.create({
                        title: 'NEW ROW',
                        buttons: 'CREATE',
                        onEsc: 'blur'
                    });
                });

1. example:

https://editor.datatables.net/examples/api/triggerButton.html - for add cost price.

I want to source code for I click to CHANGE, then field will changed to value in string - 'YES'.

Thank you.

Is it possible to reload a table using the same JSON input, without needing to re-download the file from the server? Essentially almost like reload() except without the downloading part.

First Post.
I can export to Excel with all the data in my table, but the summary footer row doesn't show up in the Excel File.
What do you need from me to troubleshoot this?
-Clint

Hello,

I would like to know if there is any plan to support Sybase / Sql Anywhere database driver like you already do with Sql Server, Oracle, ...

Or do we have to create an unofficial Odbc driver support in order to use Editor componant?

The problem with Odbc driver is that last_insert_id is not supported.

Thanks in advance and have a nice day.

Hello, jscript noob here.

I've been trying to use Datatables and I've run across an issue where changing the class of the table doesn't seem to do anything.

I have an aspx page calling a method that gets the data from SQL, data shows correctly, references to jquery and datatables js look fine, css seem to be used but I don't get the hover and one in everyline with a different background colour.

Any idea of what it could be?

Worth noting that I'm on IE9 and can't seem to be able to use firefox/chrome so I can't check if it's because of that.

Thanks in advance for any clue.

I have initialized an editor text field with

type:'text',
attr:{
    type:'number',
    min:0
},
def:'0'

Everything is working except the** default value** of the field (The text field remains empty at new)

I even tried extending the text field and setting val with jquery but still the same.

      _fieldTypes.number = $.extend(true, {}, _fieldTypes.text, {
            create: function (conf) {
                conf.attr = conf.attr || {};
                conf.attr.type = conf.attr.type || "number"
                // Call original create
                conf._input = $(_fieldTypes.text.create.call(this, conf));
                return conf._input;
            },
            set: function (conf, val) {
                return $(conf._input).val(val)
            },
        });

From the debugger I noticed that during set the val parameter is correct (0) but when setting the input val with jquery nothing happens when $(conf._input).val(val).