Hi

Below is my table config:

<

table id="xxxx" class="table striped table-bordered hover table-checkable order-column nowrap" cellspacing="0" style="width:100%;table-layout:fixed;">

I added "table-layout:fixed;" to fix alignment issue between table header and body, but I met an issue indicated in attachment, content exceed its column. If there are many columns, as a result, scroll appear, things works well!

Thank in advance!

BR
Gavin

Hi Allan,

I would like to use the Editor database object for some of my own sql queries. I could make this work:

$statement = ('SELECT DISTINCT rfa_id FROM rfa_has_rfp
                           WHERE rfp_id = :rfp_id');

$row =
$db ->raw()
    ->bind(':rfp_id', $rfpId)
    ->exec($statement)
    ->fetch(PDO::FETCH_ASSOC); // a one-dimensional array is returned SINGLE

$rowCount =
$db ->raw()
    ->bind(':rfp_id', $rfpId)
    ->exec($statement)
    ->count();

For the row count and the last insert id: is there a simpler way to do this? Do I really need to repeat the entire statement? I looked at this but I couldn't figure it out: https://editor.datatables.net/docs/1.6.1/php/class-DataTables.Database.Result.html

My OO programming skills are pretty close to zero. So please forgive me for the dumb question ...

Code
$(document).ready( function () {
$('#example').dataTable( {
"bPaginate": false
} );
} );
Error Details:Datatables warning table id=example Cannot reinitialise Datatable.For more information datatables.net/tn/3
I tried the solution proposal but it does not hide Help

Hi, I followed the tutorial you gave about Javascript sourced data.

My problem is, when I get my datas from a json, they are like this :

[["Pierre","Vincent","Vincent","Vivien","Pierre","Vivien","Khaled","Jeremy","Frederic","Pierre","Vivien","Tom","Frederic","Vivien","Jean-Vitus","Khaled","Romain","Matheo","Jean-Vitus","Khaled","Frederic","Tom","Pierre","Vincent"],["Aveyron nature","Aveyron nature","Green citizen","Renecore Apps","NS Interne","NS Interne","NS Interne","NS Interne","NS Interne","TRACK","TRACK","TRACK","TRACK","FormBuilder","ecoReleve Data","ecoReleve Data","ecoReleve Data","ecoReleve Data","Tuyaux (Bonna)","Tuyaux (Bonna)","Data Centralization","eCollection","ecoBalade","AO"],["21","27","19","4","13","13","22","54","3","18","4","32","10","23","23","9","33","46","16","7","38","18","7","6"]]

So there is 3 tables, the first one is for the hours, the second one is the employes, the third is the projects they worked one, so for exemple "Pierre worked 21h on Aveyron nature"

So I use a method to convert the result and put it in a variable with this method :

 var getdatafromurlNEW = function(myurl)
             {
                 var exist = null;
                 console.log("getdatafromurlNEW", myurl);
                 $.ajax({
                     url: myurl,
                     async: false,
                     success: function(result){
                         exist = result;
                     },
                     error: function(xhr){
                         console.log("error NEW", xhr);
                         DemanderNouveauSprint();
                     }
                 });
                 return (exist);
                 console.log('coucou',exist)
            };

Add the datas of the json in a variable :

var test = getdatafromurlNEW("http://localhost/ScrumManager/api/www/action/gethourdown/105");

(the http://localhost/ScrumManager/api/www/action/gethourdown/105 is just the json result, the 3 tables )

So then I add the datas of the variable in the datable like this :

$(document).ready(function() {
                $('#datatable').DataTable({
                    data: test,
                    columns: [
                        { title: "employes" },
                        { title: "project" },
                        { title: "hours" }
                    ]
                } );
            } );

And then I got this : (picture "resultat.pnj" or here )

I guess it's because how I fill my json.

I logged the result of the variable too if it can help, it look like this -> here

I can save each array in a different variable too

var employes = test[0];
var project = test[1];
var hours = test[2];

Any way to fix it ?
Thanks

Hi,

I have different categories in my table and I want to implement one search button to show two categories (of 5).

Actually I use this code:

{
                text: 'Purchased',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Purchased" ).draw();
                }
            },{
                text: 'Sold',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Sold" ).draw();
                }
            }

And I tried to change it into this (which doesn't work also with enabled regex):

{
                text: 'Purchased or Sold',
                action: function ( e, dt, node, config ) {
                    var table = $('#sites').DataTable();
                    table.columns( 1 ).search( "Purchased|Sold" ).draw();
                }
            }

Have anybody an idea to merge the to buttons without changing the categories?

Thanks in advance

Patrick

Hi,

I'm looking for a way to make the last row in my datatable bold (for each cell). My table is populated through JSON data.

I tried the following code but this doesn't work:

        "fnRowCallback": function( nRow, aData, iDisplayIndex ) {
            /* All cells in 4th row will be bolded  */
            if ( iDisplayIndex == 3 ) {
                $('td', nRow).each(function(){
                               $(this).html( '<td><b>'+$(this).text()+'</b><td>' );
                            });
            }
            return nRow;
        },

Any thoughts?

Bart

Hi,

in my example I tried to set a dateformat in this way:
{
label: "SellDate:",
name: "sellDate",
def: function () { var d = new Date(); return new Date(d.getFullYear(), 11, 31); },
type: "datetime",
dateFormat: "dd.mm.YYYY"
},

or
{
label: "Date:",
name: "_stocks_fees.date",
type: "datetime",
dateFormat: "dd.mm.YYYY"
}
but it seems that the dateFormat variables were ignored and the date in the form and in the tables is still YYYY-MM-DD.

What did I wrong?

Thanks for any support

Patrick

Hi,

I have some fields where I use "float" numbers (e.g. 2.81) and when I copy values from a source the numbers will be provided with a comma (like 2,81).

Is there a solution to replace the comma while/after paste it into the field?

Thanks in advance

Patrick

Hi,

We are using SmartAdmin Template v1.8.6.2 (https://wrapbootstrap.com/theme/smartadmin-responsive-webapp-WB0573SK0) with DataTables.net (https://datatables.net/) and are facing some issues using scroller along with the column filters simultaneously. Both of them works independently however when the "scrollY" property is added for the datatable with the filter property set to "true" then the scroller works fine however the filter stops working.

Here is the sample code specifying data table configuration. (in typescript) (filename: datatable.component.ts)

import {Component, Input, ElementRef, AfterContentInit, OnInit} from '@angular/core';

declare var $: any;

@Component({

  selector: 'sa-datatable',
  template: `
      <table class="dataTable {{tableClass}}" width="{{width}}">
        <ng-content></ng-content>
      </table>
`,
  styles: [
    require('smartadmin-plugins/datatables-bundle/datatables.min.css')
  ]
})
export class DatatableComponent implements OnInit {

  @Input() public options:any;
  @Input() public filter:any;
  @Input() public detailsFormat:any;

  @Input() public paginationLength: boolean;
  @Input() public columnsHide: boolean;
  @Input() public tableClass: string;
  @Input() public width: string = '100%';

  constructor(private el: ElementRef) {
  }

  ngOnInit() {
    Promise.all([
      System.import('script-loader!smartadmin-plugins/datatables-bundle/datatables.min.js'),
    ]).then(()=>{
      this.render()

    })
  }

  render() {
    let element = $(this.el.nativeElement.children[0]);
    let options = this.options || {}


    let toolbar = '';
    if (options.buttons)
      toolbar += 'B';
    if (this.paginationLength)
      toolbar += 'l';
    if (this.columnsHide)
      toolbar += 'C';

    if (typeof options.ajax === 'string') {
      let url = options.ajax;
      options.ajax = {
        url: url,
        // complete: function (xhr) {
        //
        // }
      }
    }

    options = $.extend(options, {

      "dom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs text-right'" + toolbar + ">r>" +
      "t" +
      "<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>",
      oLanguage: {
        "sSearch": "<span class='input-group-addon'><i class='glyphicon glyphicon-search'></i></span> ",
        "sLengthMenu": "_MENU_"
      },
      "autoWidth": false,
      retrieve: true,
      responsive: true,
      initComplete: (settings, json)=> {
        element.parent().find('.input-sm', ).removeClass("input-sm").addClass('input-md');
      }
    });

    const _dataTable = element.DataTable(options);

    if (this.filter) {
      // Apply the filter
        element.on('keyup change', 'thead th input[type=text]', function () {
            debugger;
        _dataTable
          .column($(this).parent().index() + ':visible')
          .search(this.value)
          .draw();

      });
    }


    if (!toolbar) {
      element.parent().find(".dt-toolbar").append('<div class="text-right"><img src="assets/img/logo.png" alt="SmartAdmin" style="width: 111px; margin-top: 3px; margin-right: 10px;"></div>');
    }

    if(this.detailsFormat){
      let format = this.detailsFormat
      element.on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = _dataTable.row( tr );
        if ( row.child.isShown() ) {
          row.child.hide();
          tr.removeClass('shown');
        }
        else {
          row.child( format(row.data()) ).show();
          tr.addClass('shown');
        }
      })
    }

  }

}

And here is the html for displaying datatable. (filename: datatable.html)

 <sa-datatable [options]="{
               select: true,
            ajax: 'assets/api/tables/datatables.standard.json',
            columns: [ {data: 'name'}, {data: 'phone'}, {data: 'company'}, {data: 'zip'} ] }
            "
                                    filter="true" tableClass="table table-condenced table-striped table-bordered">
                          <thead>
                              <tr>
                                  <th class="hasinput" [ngStyle]="{width:'17%'}">
                                      <input type="text"
                                             class="form-control"
                                             placeholder="Filter Name" />
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'18%'}">
                                      <div class="input-group">
                                          <input class="form-control"
                                                 placeholder="Filter Phone"
                                                 type="text" />
                                      </div>
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'10%'}">
                                      <input type="text"
                                             class="form-control"
                                             placeholder="Filter Company" />
                                  </th>
                                  <th class="hasinput" [ngStyle]="{width:'16%'}">
                                      <input type="text" class="form-control"
                                             placeholder="Filter Zip" />
                                  </th>
                              </tr>
                              <tr>
                                  <th data-class="expand">Name</th>
                                  <th>Phone</th>
                                  <th data-hide="phone">Company</th>
                                  <th data-hide="phone,tablet">Zip</th>
                              </tr>
                          </thead>
                      </sa-datatable>

Here, the filter works fine till the time we introduce a property "scrollY" in datatable options in datatable.html or in the datatable.component.ts file.

Hello Alan,
I have a dom sourced table:

var table = $('#planners-table').DataTable({
        dom: 'rf',
        scrollY: 300,
        scrollCollapse: true,
        paging: false,
        order: [[1, 'asc'],[0, 'asc']]
    });

<table id="planners-table" class="row-border" cellspacing="0" width="100%">
                    <thead>
                    <tr class="hide">
                        <th></th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    <? foreach ($this->plannersAvailable as $index=> $obj): ?>
                        <tr>
                            <td><?= $obj['firstName'] . " " . $obj['lastName'] ?></td>
                            <td>
                                <div class="switch tiny round clear-margin" data-id=<?= $obj['id'] ?> data-planner="<?= $obj['firstName'].' '.$obj['lastName'] ?>"><input id="enable-<?= $obj['id'] ?>" type="checkbox" <? if ($this->planner[$obj['id']]): ?> 'checked:checked' <? endif ?>>
                                    <label for="enable-<?= $obj['id'] ?>"></label>
                                </div>
                            </td>
                        </tr>
                    <? endforeach; ?>
                    </tbody>
                </table>

The scrollY option is not providing me with the vertical scroll bar. I do get this error when the modal opens and draws my table:

Uncaught TypeError: Cannot read property 'style' of undefined
    at ka (jquery.dataTables.min.js:55)
    at Y (jquery.dataTables.min.js:13)
    at jquery.dataTables.min.js:64
    at jquery.dataTables.min.js:96
    at dispatch (jquery.js:4435)
    at r.handle (jquery.js:4121)
    at Object.trigger (jquery.js:4350)
    at jquery.js:4901
    at Function.each (jquery.js:374)
    at n.fn.init.each (jquery.js:139)

the error seems to originate from:

$(document).on('click', '#edit-arranger', function() {
        $('#planners-modal').foundation('reveal', 'open');
    });

when I open the modal not sure if that has anything to with it or not.

http://andrew.cbtat.com/user/settings (click edit 'arrangers/planners')

Hi,

I am baffled. I am just starting out. I created a basic table for a test and it will not render all the way. All the rows display not just the default 10.

The pagination shows up and if i select a different number of records the rest of the table works.

Link to the test is here. http://eh.magna.net/public/dttest2.html

In the console it says (firefox) TypeError: f is undefined

Hi Team,
For a grid, I have a glyphicon as one of the item in each row.
On click on that, a pop up box will be displayed to edit items.

By default the paging count is 10.
If I navigate to next page, onclick of child item is not working.

Any idea how can I fix this?

( "columns": [ { "class": "control", "target": -1 } )

Just show icon but show/hide dont working, why? Thank you

when i attempt to sort a column in my dataTable, the table should draw again .. and my search filter arrays affect on the redraw process, but in the search arrays what returns, is False. it means I dont have any case to be filtered . but my data cut down and from 541 row showing just 29 row after sorting!
my search filter is :

$.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
var minVal = $('#txtmin_' + criteriaCode).val().replace(/,/g, '');
var maxVal = $('#txtmax_' + criteriaCode).val().replace(/,/g, '');
var columnData;
switch (settings.sTableId) {
case 'xStockDataTable':
columnData = parseFloat(data[index + 4]);
break;
case 'xSectorDataTable':
columnData = parseFloat(data[index + 2]);
break;
case 'xIndexDataTable':
columnData = parseFloat(data[index + 2]);
break;
}
if (minVal <= columnData && columnData <= maxVal) return true;
console.log('false') // when attempt sorting widouth any change on min and max it returns false
return false;
});

it seams all right and it should not affect of my sorting button.But the point is when i comment this function my sorting works right!

i am getting an error like requested unknown parameter '10' for the data source for row (screenshot is attached).
$("#ordhistTable").dataTable( {
"bJQueryUI" : true,
"sPaginationType" : "two_button",
"bAutoWidth": false,
"bLengthChange" : false,
"bProcessing": true,
"iDisplayLength" : 20,
"aaSorting": [],
"bFilter" : true,
"aoColumns": [
{ "bSearchable": false, "sType": "string" },
{ "bSearchable": true, "sType": "string" },
{ "sType":"de_date","aTargets": [ 2 ]},
{ "sType":"de_date","aTargets": [ 3 ]},
{"sType":"de_date", "aTargets": [ 4 ]},
{ },
{ },
{ },
{ "sType": "string" },
{ "sType": "string" },
{ "sType": "string" },
{ "sType": "numeric" },
{ "sType": "string" }
// { "sType": "string" }
]
});
this is the script and iam trying to sort tables 2,3,4.
please help.
Thanks in advance

Hi, i have a problem with the open event:
[code]
editor.on('open', function () {
set_LastUpdate();
{ hide: ['IP', 'SUBMASK', 'GATEWAY'] };
} );
[/code]

when I opened the editor for the first time, the event is not called. The second time it works without problems.
How can I fix?
Thanks

I need to get a page number for a particular row. How can i do this..? Can anyone help me..?

Hi Allan,
I have 5 datatables, but all datatables have same columns, different data. Here is a debug link :
http://debug.datatables.net/ohakof

I have num-html datatype and this doesnt seem to work : https://datatables.net/plug-ins/sorting/num-html

I need to sort these columns.

How do I achieve that ?

Regards,
Ashish

I'm attempting to use this component for a number of reports.
The base query returns 50K rows. Sadly, I'm unable to use server-side processing so this is slow as molasses in Winter.
Except when it crashes, that happens pretty fast.
I know this isn't datatables fault fully, but I have been so frustrated with this whole thing.
I don't believe it works well with PHP.

I have a columnDefs that come from some object and it looks like this

{
      targets: '_all',
      createdCell: function(td, cellData, rowData, row, col) {
         if(cellData == 0.01){
            td.className += " numberIsLower";
         }
      }
   }

Now in my specific table I also want to use some method for "createdCell" only for specific target

{
      targets: '1',
      createdCell: function(td, cellData, rowData, row, col) {
         //// Some code
      }
   }

I do merge between two columnDefs and render a DataTable with united columnDefs, but the thing is that I don't see that the code of my specific target is executing.

What am I doing wrong?