..........my html:
$(document).ready(function() {
var dataTable = $('#acao_table').DataTable( {
"processing": true,
"serverSide": true,
"ajax":{
url :"BF_acessoBbSqlite_acao.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".acao_table_error").html("");
$("#acao_table").append('<tbody class="acao_table_error"><tr><th colspan="4">Nenhum dado encontrado no servidor</th></tr></tbody>');
$("#acao_table_processing").css("display","none");
}
}
} );
} );

.... my server-side
if( !empty($requestData['search']['value']) ) {
$sql.=" AND (id LIKE '" . $requestData['search']['value'] . "%' ";
$sql.=" OR nome LIKE '" . $requestData['search']['value'] . "%' ";
$sql.=" OR cmt LIKE '" . $requestData['search']['value'] . "%' ";
$sql.=" OR mrid LIKE '" . $requestData['search']['value'] . "%' ) ";
}
$query = $sqlite_db->query($sql) or die("Com o search: BF_acessoBbSqlite_acao.php: get acao");
$totalFiltered = count($query->fetchAll());
$sql.=" ORDER BY " . $columns[$requestData['order'][0]['column']] . " " . $requestData['order'][0]['dir'] . " LIMIT " . $requestData['start'] . " ," . $requestData['length'] . " ";// adding length
$query = $sqlite_db->query($sql) or die("Erro no sql: BF_acessoBbSqlite_acao.php: get acao");

$data = array();
foreach ($sqlite_db->query($sql) as $row) { // preparing an array
$nestedData=array();

    $nestedData[] = $row["ID"];
    $nestedData[] = $row["NOME"];
    $nestedData[] = $row["CMT"];
    $nestedData[] = $row["MRID"];

    $data[] = $nestedData;

}

$json_data = array(
"draw" => intval( $requestData['draw'] ), // for every request/draw by clientside
"recordsTotal" => intval( $totalData ), // total number of records
"recordsFiltered" => intval( $totalFiltered ), // total number of records after searching
"data" => $data // total data array
);

echo json_encode($json_data); // send data as json format

From an item in my first datatable (test.html) I want to load a second datatable (test2.php) via ajax in a div, but the second datatable isn't functional.

Any suggestions?

Hi,

I am using DataTables in recent times and its very useful.

I have been using 2 tables under 2 different nav tabs. When the page loads at first, the active nav tab table is fine. But when I switch to the next nav tab, the table header is misaligned with table content. Again when I click on the header, then the table is fine.

I have been reading all the solutions provided, but none helped in fixing my issue.

Please find the attached file.

Can you please help me here.

Hi all,

I've implemented DataTables and I really love it, but is it possible that DataTables DOM manipulation causes my custom modals not to be shown after clicking a button?

I have Delete buttons which trigger custom modal display and prevent default actions until the user decides.
When landing on the page these work, but after pagination or filtering these actions are not triggered. The records simply gets deleted, which is really dangerous.

Am I doing something wrong?

thank you.
seba

Hi everyone,

I have a table where one column is linking to an object (my debugger code): azesed:

{ "name": "Response.Jhn", "data": "Response", "render": $.fn.DataTable.render.jhn(), "orderable": false }

I want to do some operation on this column and display data depending on a child member of Response, so I wrote the render function here ($.fn.DataTable.render.jhn()):

$.fn.dataTable.render.jhn = function() {
    return function(data, type, row) {
        if (type === "display") {
            if (data === null) return "Not priced";
            if (data.Jhn == null) {
                return "Not issued";
            } else {
                return "JHN-" + data.Jhn;
            }
        } else {
            if (data === null) return "Not priced";
            if (data.Jhn == null) {
                return "Not issued";
            } else {
                return data.Jhn;
            }
        }
    }
}

I am using server side processing (not sure it really matters here) and individual column dropdowns as in the example here:

https://datatables.net/examples/api/multi_filter_select.html

I removed the escaping so here is my implementation:

 var select =
               $('<select class="form-control"><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                     .on('change',
                              function() {
                                      column
                                      search(this.value)
                                       .draw();
                                     debugger;
               });

But the issue is for this particular column when I search it, I always get [object Object] in return instead of the code I thought I specified in the renderer ("Not priced, "Not issued" or data.Jhn)

How do I specify the correct data in the renderer? Or maybe I am getting the filter wrong?

Thanks for the help! And I love the plug-in!

I search but i cant found i want add button and creat new fields with array?

like that:formvalidation.io/examples/adding-dynamic-field/

Thank you

Hi,

For a first try I would like to display only the ids of a table in a Datatable by using Serverside processing. But I'm searching for a few days and I can't success. I get a 'invalid json response' What's wrong with that :

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript">
            var table;
            $(document).ready(function() {
                table = $('#table').DataTable({
                    "processing": true,
                    "serverSide": true,
                    "ajax": {
                        "url": "application/php/joinArray.php",
                        "type": "POST"
                    } ,
                "columns": [
                    { "data": "id" }]
                });
            });
        </script>
    </head>
<body>
    <div class="container">
        <table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
            <thead>
                <tr>
                     <th>Id</th>
                </tr>
            </thead>
            <tfoot>
            <tr>
                     <th>Id</th>
            </tr>
            </tfoot>
        </table>
    </div>
</body>
</html>```


Server side phpscript :

<?php
include('../libraries/Editor-PHP-1.6.1/php/DataTables.php');
use
    DataTables\Editor,
    DataTables\Editor\Field,

Editor::inst( $db, 'interventions' )->fields(Field::inst('id'))->process($_POST)->json();

`

Im using yadcf 1.10 and im trying to do the following:

i have a multi_select filter above some Columns and i want that only those rows are shown, which DONT contain the selected values.

Example:

| col1 |

| apple |
| beer |
| plant |
| tree |
| meat |
| fish |
| tree/beer |
| meat/apple |

==> i select apple AND beer:

| col1 |

| plant |
| tree |
| meat |
| fish |
| tree/beer |
| meat/apple |

==> cleared search and now selecting tree AND beer AND meat AND fish:

| col1 |

| apple |
| plant |
| meat/apple |

How can i do this server-side?

Hi Support,
How to move cursor to next cell after edit value. currently cursor gone after press ENTER.

Regards.
Sunil

Allen,

I am trying to provide a table which behaves somewhat like excel, in that if you edit a cell, other cells will update based on a formula. I implemented a php function which recalculates and updates all table elements which were impacted by the POST data

I then need to have this RUN as a post edit event. This failed, so I thought I could do an ajax.reload using a drawCallback, but I cannot get that to function either

I seem to be wrestling with 2 issues:

1

        var affordTable;
    $(document).ready(function() {
        var affordTable = $("#affordTable").DataTable( {
                        dom: "Bt",
            "drawCallback": function( settings ) {
                affordTable.ajax.reload();
            },
                       ......

results in: TypeError affordTable is undefined
What am i doing wrong?

In the server side
```
->on( 'postEdit', function ( $editor, $id, $values )
{
updateSubtotals();
})

Which calls php function to calculate and update subtotal columns in a mysql table, causes a
Lock wait timeout exceeded error in mysql (the query executes just fine from phpMyAdmin)

Any idea why this occurs?

I'm relatively new at this, so please forgive me if I'm missing something obvious.

I've built a page that allows the user to submit a bunch of device serial numbers, and which will then query the database for all the information available within the system on those serials and display the result via datatables on the page. I've also added the ability into the page it identify and automatically select the rows in which the database doesn't contain any information on the queried serial numbers.

As the user will often then need to followup with those serials in another internal tool, I've added a copy-to-clipboard button that will pull just the serial numbers of the selected rows. This is currently working great, however like in all ventures, there's always room to improve the user experience, so I'm trying to determine if I can take those selected serials and then pass them directly into another system's API to allow the user to skip the step of copying to the clipboard and going to another page to submit that information.

Here's my current buttons code that handles the copy-to-clipboard and the filtering of just the serials:

buttons: [{ extend: 'copy', text: 'Copy Selected Serials to Clipboard', header: false, exportOptions: { columns: 1, modifier: { selected: true } } }],

I'm trying to add a button that will take the same data from above, and instead of copying it to the clients clipboard, will generate a redirect or link to another page where the data is passed as a comma seperated parameter in the URL. At this point, I dont really care if the link generation is handled all client side, or if it is handled server side thru an ajax query to a server side script that takes the array and processes it to generate the API URL (I'm honestly more comfortable with PHP than Jquery, so the server side option might be easier for me to work out). The big issue is I'm having a hard time finding information on how to pull the data from datatables and pass it on click to another ajax call or other internal process.

any help anyone could provide would be greatly appreciated.

~Daryl

Hi Everyone, I am new to datatables.

I am trying to load data through ajax/txt file using this example.

https://datatables.net/examples/api/row_details.html

I wish to add 1 column as an image. What changes should I make to the ajax (objects.txt) & the javascript file.

Any help is appreciated

Is it possible to add the datatable buttons( print, csv, copy etc) to a bootstrap dropdown button?

I have tried several ways and just can't seem to figure it out. Does anybody know of any example code implementing this which i could use and modify?

Thank you.

Sorry to be such a pain, but I have yet another question. Mainly, I have a function that enables scrolling row selection like this:

            function () {
                var isMouseDown = false,
                isSelected;
                $("#homeTable tr")
                  .mousedown(function () {
                      isMouseDown = true;
                      $(this).toggleClass("selected");
                      isSelected = $(this).hasClass("selected");
                      return false; // prevent text selection
                  })
                  .mouseover(function () {
                      if (isMouseDown) {
                          $(this).toggleClass("selected", isSelected);
                      }
                  })
                  .bind("selectstart", function () {
                      return false;
                  })

                $(document)
                  .mouseup(function () {
                      isMouseDown = false;
                  });
            }

I define this function before initializing my table. My problem is that if I add new row, this function is not applied to those new rows. I have tried adding a callback like this:

    $(document).ready(function () {
        var table = $('#homeTable').DataTable({
            scrollY: "500px",
            //scrollX: true,
            responsive: true,
            scrollCollapse: true,
            paging: true,
            lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            drawCallback: function (settings) {
                var isMouseDown = false,
                isSelected;
                $("#homeTable tr")
                  .mousedown(function () {
                      isMouseDown = true;
                      $(this).toggleClass("selected");
                      isSelected = $(this).hasClass("selected");
                      return false; // prevent text selection
                  })
                  .mouseover(function () {
                      if (isMouseDown) {
                          $(this).toggleClass("selected", isSelected);
                      }
                  })
                  .bind("selectstart", function () {
                      return false;
                  })

                $(document)
                  .mouseup(function () {
                      isMouseDown = false;
                  });
            }

        });

However, if I do that, I am unable to select any rows on initialization, but if I add new rows, I CAN select those new rows and only those new rows. How can I apply this function across the board to all rows on initialization as well as any new rows upon their addition? Again, sorry to be such a bother!

I'm trying to build a tabbed report using 5 datatables. I have abandoned this idea, as I have been unable to get it to work.
I have switched to single pages for each, but hitting the same issues.
3 of the tables are returning invalid JSON errors, in fact I'm getting 8+ alerts per page on the same query.
I don't understand why the JSON is not working, and why its attempting to run AJAX 8+ times per page
I've included my code here: http://live.datatables.net/jamidaza/1/edit?html,js
The example doesn't work, as it requires the php data component.
However, I've included a small working set of data below as it is returned from php/ajax

{"draw":15,"recordsTotal":"56282","recordsFiltered":"13","data":[["2","06-JUN-14","246246","246246","246246","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","246246criteria_null_value",null,"criteria_null_value",null],["3","06-JUN-14","26500?","265000","265009","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26500?criteria_null_value",null,"criteria_null_value",null],["4","06-JUN-14","26501?","265010","265019","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26501?criteria_null_value",null,"criteria_null_value",null],["5","06-JUN-14","26502?","265020","265029","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26502?criteria_null_value",null,"criteria_null_value",null],["6","06-JUN-14","26503?","265030","265039","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26503?criteria_null_value",null,"criteria_null_value",null],["7","06-JUN-14","26504?","265040","265049","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26504?criteria_null_value",null,"criteria_null_value",null],["8","06-JUN-14","26505?","265050","265059","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26505?criteria_null_value",null,"criteria_null_value",null],["9","06-JUN-14","26506?","265060","265069","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26506?criteria_null_value",null,"criteria_null_value",null],["10","06-JUN-14","26507?","265070","265079","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26507?criteria_null_value",null,"criteria_null_value",null],["11","06-JUN-14","26508?","265080","265089","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26508?criteria_null_value",null,"criteria_null_value",null],["12","06-JUN-14","26509?","265090","265099","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","26509?criteria_null_value",null,"criteria_null_value",null],["13","06-JUN-14","2651??","265100","265199","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","2651??criteria_null_value",null,"criteria_null_value",null],["14","06-JUN-14","265265","265265","265265","000-AOLIM","AOLIM-SAOLIM","AOLIM-SAOLIM","000-AOLIM","Native","265265criteria_null_value",null,"criteria_null_value",null]]}

Any assistance appreciated
Allan

Here is a link to where I have it running

http://www.thriveonsoftware.com/admin/reports/question_edit.php

I've put all the jscript files, made sure that dom: "Bfrtip", but can't get the edit, remove, create to show...any ideas what I'm doing wrong here?

Thanks,
Allen

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.

I want to use the 'Data Tables (v1.10)' component that came along with SmartAdmin Angular 2 framework (https://smartadmin-ng2.github.io/dashboard/analytics), and want to implement/extend most of the features listed here https://datatables.net/extensions/index, for example –
* Fixed Header
* Fixed left Columns
* Re-order columns
* Scroller
I tried some of these, but it does not work.

Has anyone in this forum used/accomplished the above? Does it work? I am not sure if there are any issues with the framework or if I am missing something.

I am looking for some documentation on –
* Steps on what needs to be done to accomplish this
* What components/packages/libraries needs to be installed
* Sample script/snippets on how these features are implemented

Any information or directions will be greatly appreciated. Thanks in advance!

Hi every one,

Sorry my terrible english.

I started working with DataTables yesterday, it was all great but I'm not getting this simple sum.

Let me try to show my difficulty in the datatables.

I have a table :
{"target":0, "mDataProp": "seq"},
{"target":1, "mDataProp": "datavcto"},
{"target":2, "mDataProp": "datapgto"},
{"target":3, "mDataProp": "descricao"},
{"target":4, "mDataProp": "valororig"},
{"target":5, "mDataProp": "valorpago"},
{"target":6, "mDataProp": "id"},
{"target":7, "mDataProp": "debcre_dito"}

When the value of column 7 equals 1, store the sum of the column 3 in the variable deb, when the value is 0 to store in the variable cred on footerCallback.

Can someone help me?

Att

Georgios

Hi,

I am using DataTables in recent times and its very useful.

I have been using 2 tables under 2 different nav tabs. When the page loads at first, the active nav tab table is fine. But when I switch to the next nav tab, the table header is misaligned with table content. Again when I click on the header, then the table is fine.

I have been reading all the solutions provided, but none helped in fixing my issue.

Please find the attached file.

Can you please help me here.