row_dedails, serverside

Andreas S.

Hi,

I have problems to show the icon for details clicking. I tried many , but I can not get the Date from the Server.
I get always the error : "error":"Unknown field: (index 0)","data":[]
I know, that data: null makes the > problem. Anyway I have no more ideas how solve the problems.

Here the debug: debug.datatables.net/ubuwek

Andreas

JS:

function format(d){
    if(d.ltv_events.m_street_2 == ''){ var line = ''; }
    else{ var line = d.ltv_events.m_street_2; }
    return 'Adress: <br />'+d.ltv_events.m_street_1+'<br />'+line+'<br />'+d.ltv_events.m_zip+
                 ' '+d.ltv_events.m_city+'<br />'+d.nation_codes.name_en+'<br />Deadline:<br />'+d.ltv_events.deadline;
}

$(document).ready(function(){
    edit_mlist = new $.fn.dataTable.Editor({
        ajax: 'assets/lib/evm_server_processing.php',
        table: '#meetlist',
        fields: [{
                label: 'Event Title:',
            name: 'ltv_events.m_title'
            },{
                type: 'datetime',
                label: 'Start Date:',
            name: 'ltv_events.b_date',
            def: function () { return new Date(); },
            format: 'DD. MMMM YYYY'
            },{
                type: 'datetime',
                label: 'End Date:',
            name: 'ltv_events.e_date',
            def: '',
            format: 'DD. MMMM YYYY'
            },{
                type: 'datetime',
                label: 'Deadline:',
            name: 'ltv_events.deadline',
            def: function () { return new Date(); },
            format: 'DD. MMMM YYYY'
            },{
                label: 'Course:',
                name: 'ltv_events.m_course',
                type: 'radio',
                options: [ '50m', '25m'],
                def: '50m',
                fieldInfo: ''
            },{
                label: 'Street:',
                name: 'ltv_events.m_street_1'
            },{
                label: '',
                name: 'ltv_events.m_street_2'
            },{
                label: 'ZIP:',
                name: 'ltv_events.m_zip'
            },{
                label: 'City:',
                name: 'ltv_events.m_city'
            },{
                label: 'Nation:',
                name: 'ltv_events.m_nation',
                type: 'select',
                def: 'AUT'
            }
        ]
    });

    var meetlist = $('#meetlist').DataTable({
      serverSide: true,
      processing: true,
      ajax: {
        url: 'assets/lib/evm_server_processing.php',
        type: 'POST'
      },
      createdRow: function( row, data, index){
        var now = moment();
        var event = moment(data.ltv_events.e_date,'DD. MMMM YYYY')
        if(now.diff(event, 'days') <= 20){
            console.log(now.diff(event, 'days'));
            $('td', row).eq(1).addClass('txt-warning');
        }
      },
      columns: [
        {   data: null, className: 'details-control', orderable: false, searchable: false, defaultContent: "" },
            { data: 'ltv_events.b_date', width: '13%', className: 'dt-body-right' },
            { data: 'ltv_events.e_date', width: '13%' },
        { data: null, render: function (data, type, row){
            return (data.ltv_events.m_nation == '')? '' :
                    '<img class="center" title="'+data.nation_codes.name_en+'" src="assets/images/flags/rect/24/'+data.ISO3166+'.png" />';
        }, orderable: false, width: '5%', className: 'dt-body-center' },
        { data: 'ltv_events.m_title' },
        { data: 'ltv_events.m_course', width: '7%', className: 'dt-body-center' },
        { data: 'ltv_events.deadline', width: '13%' }
        ],
        lengthChange: false,
        autoWidth: false,
        select: true
    });

  new $.fn.dataTable.Buttons(meetlist,[
            { extend: 'create', editor: edit_mlist },
        { extend: 'edit', editor: edit_mlist },
        { extend: 'remove', editor: edit_mlist }
    ]);

  meetlist.buttons().container()
    .appendTo($('.col-sm-6:eq(0)', meetlist.table().container()));

  var detailRows = [];

  $('#meetlist tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = meetlist.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
        if(row.child.isShown()){
            tr.removeClass('details');
            row.child.hide();

      // Remove from the 'open' array
      detailRows.splice( idx, 1 );
    }else{
            tr.addClass('details');
            row.child(format(row.data())).show();

      // Add to the 'open' array
      if (idx === -1){
                detailRows.push( tr.attr('id') );
            }
    }
  });

    // On each draw, loop over the `detailRows` array and show any child rows
    meetlist.on( 'draw', function (){
            $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger('click');
        });
  });
});

PHP

if((include PLUGIN_DIR.'DTables/Editor/1.5.6/php/DataTables.php') == FALSE){ echo 'Failed include Edit'; }

use
  DataTables\Editor,
  DataTables\Editor\Field,
  DataTables\Editor\Format,
  DataTables\Editor\Mjoin,
  DataTables\Editor\Upload,
  DataTables\Editor\Validate;

$db->sql( 'CREATE TABLE IF NOT EXISTS `ltv_events` (
    `id` INT UNSIGNED NOT NULL AUTO_INCREMENT ,
    `federation` VARCHAR(255) NOT NULL,
    `b_date` DATE NOT NULL ,
    `e_date` DATE NOT NULL ,
    `deadline` DATE NOT NULL ,
    `m_title` VARCHAR(255) NOT NULL ,
    `m_course` VARCHAR(5) NOT NULL ,
    `m_street_1` VARCHAR(255) NOT NULL ,
    `m_street_2` VARCHAR(255) NOT NULL ,
    `m_zip` VARCHAR(10) NOT NULL ,
    `m_city` VARCHAR(255) NOT NULL ,
    `m_nation` VARCHAR(5) NOT NULL ,
    PRIMARY KEY (`id`))
    ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_unicode_ci;' );

$FormattoSQL = 'd. F Y';
$SQLtoFormat = 'd. F Y';

Editor::inst( $db, 'ltv_events', 'id' )
    ->fields(
            Field::inst( 'ltv_events.id' ),
            Field::inst( 'ltv_events.b_date' )
                ->validator( 'Validate::dateFormat', array(
                        'empty' => false,
                'format'  => $FormattoSQL,
              'message' => 'Please enter a date in the format dd. mmmm yyyy'
           ))
           ->getFormatter( function ($val, $data, $opts ){
                    if($val === '0000-00-00'){ return NULL; }
                    else{ return date( 'd. F Y', strtotime( $val )); }
                }
                 )
           ->setFormatter( 'Format::date_format_to_sql', $FormattoSQL ),
            Field::inst( 'ltv_events.e_date' )
                ->validator( 'Validate::dateFormat', array(
                        'empty' => false,
                'format'  => $FormattoSQL,
              'message' => 'Please enter a date in the format dd. mmmm yyyy'
           ))
           ->getFormatter( 'Format::date_sql_to_format', $SQLtoFormat )
           ->setFormatter( 'Format::date_format_to_sql', $FormattoSQL ),
            Field::inst('ltv_events.deadline')
                ->validator( 'Validate::dateFormat', array(
                'format'  => $FormattoSQL,
              'message' => 'Please enter a date in the format dd. mmmm yyyy'
           ))
           ->getFormatter( function ($val, $data, $opts ){
                    if($val === '0000-00-00'){ return NULL; }
                    else{ return date( 'd. F Y', strtotime( $val )); }
                }
                 )
           ->setFormatter( 'Format::date_format_to_sql', $FormattoSQL ),
            Field::inst( 'ltv_events.m_title' )
                ->validator( 'Validate::minLen', 2 ),
            Field::inst( 'ltv_events.m_course' )->validator( 'Validate::notEmpty' ),
            Field::inst( 'ltv_events.m_street_1' ),
            Field::inst( 'ltv_events.m_street_2' ),
            Field::inst( 'ltv_events.m_zip' ),
            Field::inst( 'ltv_events.m_city' ),
        Field::inst( 'ltv_events.m_nation' )
            ->options('nation_codes', 'IOC', 'name_en')
            ->validator( 'Validate::dbValues' ),
        Field::inst( 'nation_codes.name_en' ),
        Field::inst( 'nation_codes.ISO3166-1-Alpha-2 as ISO3166' ),
            Field::inst( 'ltv_events.federation' ),
            Field::inst( 'ltv_events.id', 'ltvid')
                ->getFormatter( function ($val, $data, $opts ){
                    return 'row_'.$val;
                }
            )
    )
    ->leftJoin('nation_codes', 'nation_codes.IOC', '=', 'ltv_events.m_nation')
        ->process( $_POST )
    ->json();

HTML

  <section>
    <div class="container">
            <div class="table-responsive">
                <table class="table table-striped row-border table-hover" id="meetlist">
                    <thead>
                        <tr>
                            <th></th>
                            <th class="text-center" colspan="2">Date</th>
                            <th colspan="4"></th>
                        </tr>
                        <tr>
                            <th></th>
                            <th>Begin</th>
                            <th>End</th>
                            <th></th>
                            <th>Title</th>
                            <th>Course</th>
                            <th>Deadline</th>
                        </tr>
                    </thead>
                </table>
            </div>
    </div>
  </section>

allan

Its because you are using server-side processing and the default is to sort on column index 0, which is a client-side generated column that the server knows nothing about. Use order to default sort on column index 1 and it should be resolved.

Allan

Andreas S.

Thanks, that solve my Problem.

Andreas