Problems with server-side filtering
Problems with server-side filtering
steiniman
Posts: 4Questions: 1Answers: 0
Viewing the tables already works great. Now I have however a problem: I would like with pre-filter the appropriate column on the server by means of combo box. But somehow this does not work properly, where do I have to start?
Here is the code in the HTML:
<table width="100%" class="table table-striped table-bordered" id="bestellung" cellspacing="0">
<thead>
<tr>
<th>Shop</th>
<th>Bestellnr.</th>
<th>Bestellzeit</th>
<th>Firma</th>
<th>Vname</th>
<th>Kunde</th>
<th>Zahlart</th>
<th>Bestellstatus</th>
<th>Zahlstatus</th>
<th>Aktionen</th>
</tr>
<tr id="filterrow">
<th></th>
...
<th></th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<th>Shop</th>
...
<th>Aktionen</th>
</tr>
</tfoot>
</table>
<script>
$(document).ready(function()
{ $('#bestellung').DataTable(
{ "language": { "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json"},
"initComplete": function () {
this.api().columns([6]).every( function () {
var column = this;
var select = $('<select size="1" class="form-control input-sm"><option value="999">Alle</option></select>')
select.append( '<option value="1" style="background-color:#00572c;color: white;">Vorkasse</option>')
select.append( '<option value="2" style="background-color:#ff8040;color: white;">Sofort</option>')
.appendTo($(column.header("#filterrow")).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? ''+val+'' : '', true, false )
.draw();
} );
} );
},
"lengthMenu": [[25, 50, 100, 250, -1], [25, 50, 100, 250, "Alle"]],
"paging": true,
"serverSide": true,
"stateSave": true,
"showFilters": true,
"deferRender": true,
"scrollY": 500,
"scrollX": true,
"ajax": { url: "../tabelle_bestell.php",
type: 'post'
},
columns:
[ { data: null, render: function ( data, type, row )
{ if (data.shop == 1) { return '<span class="label label-info demo-element">xxx</span>'; }
if (data.shop == 3) { return '<span class="label label-warning demo-element">yyyy</span>'; }
if (data.shop == 5) { return '<span class="label label-info demo-element">zzz</span>'; }
if (data.shop == 6) { return '<span class="label label-info demo-element">aaa</span>'; }
}
},
{ data: "bestellnr"},
{ data: "bestzeit"},
{ data: "user_f"},
{ data: "user_v"},
{ data: "user_n"},
{ data: "zahlart"},
{ data: "bestatus"},
{ data: "zahlstatus"},
{ data: "becode"}
],
"order": [[ 1, "desc" ]],
columnDefs: [
{ targets: 0,
width: "28px",
searchable: false,
orderable: false
},{ targets: 1,
width: "50px",
searchable: true,
},{ targets: 2,
width: "85px",
searchable: true,
},{ targets: 4,
visible: false,
},{ targets: 5,
searchable: true,
render: function ( data, type, full ) {
if (full['user_t'] != '')
{ return full['user_t']+' '+full['user_v']+' '+full['user_n']; }
else
{ return full['user_v']+' '+full['user_n']; }
},
searchable: true,
},{targets: 6,
width: "80px",
render: function ( data, type, full ) {
return '<span class="label demo-element" style="background-color: '+full['zahlart_farbe']+';">'+data+'</span>';
},
s
searchable: true,
orderable: false,
},{ targets: 7,
width: "80px",
render: function ( data, type, full ) {
return '<span class="label demo-element" style="background-color: '+full['bestatus_farbe']+';">'+data+'</span>';
orderable: false
},
},{ targets: 8,
width: "80px",
render: function ( data, type, full ) {
return '<span class="label demo-element" style="background-color: '+full['zahlstatus_farbe']+';">'+data+'</span>';
},
orderable: false
},{ targets: 9,
width: "80px",
render: function ( data, type, full ) {
return '<button class="edit_value ui-tooltip" onclick="bestdetails(\''+data+'\')"><i class="fa fa-pencil"></i></button> '+
'<button class="edit_value ui-tooltip btn-success" onclick="besttorg(\''+data+'\')"><i class="fa fa-arrow-right"></i></button>';
},
orderable: false,
searchable: false
},
]
} )
} );
Here is the code in the php:
include( "../stlsys/datatable/DataTables.php");
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate;
Editor::inst( $db, 'tab1', 'ID' )
->fields(
Field::inst( 'tab1.partnerid as shop' ),
Field::inst( 'tab1.bestellnr as bestellnr' ),
Field::inst( 'tab1.bestzeit as bestzeit')
->validator( 'Validate::dateFormat', array( 'format'=>'d.M.Y H:i' ) )
->getFormatter( 'Format::datetime', array( 'from'=>'Y-m-d H:i:s', 'to' =>'d.m.Y H:i' ) )
->setFormatter( 'Format::datetime', array( 'to' =>'Y-m-d H:i:s', 'from'=>'d.m.Y H:i' ) ),
Field::inst( 'tab2.rg_firma as user_f' )
->options( Options::inst()
->table( 'tab2')
->value( 'ID')
->label( 'rg_firma')
),
Field::inst( 'tab2.rg_titel as user_t' )
->options( Options::inst()
->table( 'tab2')
->value( 'ID')
->label( 'rg_titel')
),
Field::inst( 'tab2.rg_vname as user_v' )
->options( Options::inst()
->table( 'tab2')
->value( 'ID')
->label( 'rg_vname')
),
Field::inst( 'tab2.rg_nname as user_n' )
->options( Options::inst()
->table( 'tab2')
->value( 'ID')
->label( 'rg_nname')
),
Field::inst( 'tab1.zahlbetrag as zahlbetrag' ),
Field::inst( 'tab3.kurz as zahlart' )
->options( Options::inst()
->table( 'tab3')
->value( 'ID')
->label( 'kurz')
),
Field::inst( 'tab3.hfarbe as zahlart_farbe' )
->options( Options::inst()
->table( 'tab3')
->value( 'ID')
->label( 'hfarbe')
),
Field::inst( 'tab4.bez as bestatus')
->options( Options::inst()
->table( 'tab4')
->value( 'ID')
->label( 'bez')
),
Field::inst( 'tab4.hfarbe as bestatus_farbe')
->options( Options::inst()
->table( 'tab4')
->value( 'ID')
->label( 'hfarbe')
),
Field::inst( 'tab5.bez as zahlstatus')
->options( Options::inst()
->table( 'tab5')
->value( 'ID')
->label( 'bez')
),
Field::inst( 'tab5.hfarbe as zahlstatus_farbe')
->options( Options::inst()
->table( 'tab5')
->value( 'ID')
->label( 'hfarbe')
),
Field::inst( 'tab1.becode as becode' )
)
->leftJoin( 'tab3', 'tab3.ID', '=', 'tab1.zahlart')
->leftJoin( 'tab4', 'tab4.ID', '=', 'tab1.bestatus')
->leftJoin( 'tab5', 'tab5.ID', '=', 'tab1.zahlstatus')
->leftJoin( 'tab2', 'tab2.ID', '=', 'tab1.rgadrid')
->process($_POST)
->json();
This discussion has been closed.