Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML


Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog

Channel Description:

Recent Discussions — DataTables forums

older | 1 | .... | 2254 | 2255 | (Page 2256) | 2257 | 2258 | .... | 2326 | newer

    0 0
  • 11/16/18--11:50: Sorting number with Text
  • Any idea on how I can get the text included with a number to be calculated when sorting? Ie,

    Notice the Network Hash Rate? There are MH/s, KH/s, and H/s. The number sort just fine, but I want to add a priority to MH/s over KH/s over H/s

    I found this example: - but it does not take into account a number with the word.

    Here is my current setup

    $(document).ready(function() {
        var table = $('#sortthisbitch').DataTable( {
              /*responsive: {
                breakpoints: [
                  {name: 'bigdesktop', width: Infinity},
                  {name: 'meddesktop', width: 1480},
                  {name: 'smalldesktop', width: 1280},
                  {name: 'medium', width: 1188},
                  {name: 'tabletl', width: 1024},
                  {name: 'btwtabllandp', width: 848},
                  {name: 'tabletp', width: 768},
                  {name: 'mobilel', width: 480},
                  {name: 'mobilep', width: 320}
                columnDefs: [
                    { responsivePriority: 1, targets: 0 },
                    { responsivePriority: 2, targets: -2 }
            responsive: true,
            columnDefs: [
                { responsivePriority: 1, targets: 0 },
                { responsivePriority: 2, targets: -2 }
            paging:   false,
            aoColumnDefs: [{'bSortable': false, 'aTargets': [ -1 ]}],
            orderCellsTop: true,
            columnDefs: [
                { "type": "percent", targets: 2 }
            dom: 'Bfrtip',
            buttons: [
            'copy', 'excel', 'pdf', 'colvis'
        } );
    } );

    0 0

    I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. The examples that SmartAdmin provides are working fine, but they did not provide an example showing how to include a checkbox for each row, so that the ID can be used to delete, or modify, a selected row. I have studied the DataTables documentation on checkboxes (, trying to guess how SmartAdmin might have handled checkboxes, but nothing I've tried has worked.

    Here is what my code currently looks like:

                      data: sysMsgs,
                      columns: [
                      {data: 'rowid'},
                      {data: 'senderID'},
                      {data: 'message'},
                      {data: 'dateCreated'}
                      buttons: [
                        'copy', 'csv', 'pdf', 'print'
                    tableClass="table table-striped table-bordered table-hover"
                      <th data-hide="mobile-p">ID</th>
                      <th data-hide="mobile-p">Sender</th> 
                      <th data-hide="mobile-p">Message</th>
                      <th data-hide="mobile-p">Date Sent</th>

    This renders the following table:

    It seems like I should be able to add an option for Checkboxes. Any ideas on how to do it?


    0 0

    How to use the dataTable as inline table? I don't want to use the full width because another inline element should be placed next to it. But there is a bug when used with the responsive extension.

    To reproduce the problem:
    Go to,css,js,output
    Resize the output window to show all, then hide the last column and afterwards try to get the last column back.

    Is there a class to set like or another solution?

    0 0

    I'm pilot testing datatables for my company, and I'm able to run the editor/node.js example with mysql running locally on my machine. All the examples run just fine at https://localhost:8081/examples.

    All things being equal, i modify the db.js file to say the following:

    let knex = require('knex');
    module.exports = knex({
        client: 'oracledb',
        connection: {
            host: 'oracledev',
            user: 'test',
            password: 'test',
            database: 'orcl'

    And then attempt to run the example with npm start and i get the following output

    DataTables Editor demo - navigate to http://localhost:8081/
    TypeError: Cannot read property 'replace' of undefined

    the line that comes back right after the server starts is TypeError: Cannot read property 'replace' of undefined And the source of that error i'm finding is very difficult to track down.

    Please advise!

    0 0
  • 11/16/18--16:50: Server Side Processing?
  • Hi @allan,

    We are facing few issues in our application.
    we have implemented data table on server side("serverSide" : true) to fetch the data from back-end ,
    => The issue is arising when we are updating a single row and clicking outside of the row, it is calling to the back-end.

    => The expected result is, we should be able to update multiple records, and the table should be updated only after clicking the save button.

    the below given link is the reference to the code format that we are using in our application

    I have got the below examples from the datatable website, but the issue we are facing haven't been resolved even after using these references

    So, can you please suggest us any particular method to resolve the above mentioned issue.


    0 0

    Each time i press the button to order a column the start parameter reset to 0 and also get my pagination back to the page 1

    For exemple i change page and my start point change 0 to 10 to 20 to 30 etc...
    but when i press the button to order a column the start point send to 0

    is there a way to add a property to the object to say each time the order button is press to not reset the start point to 0?

    i hope you understand

    ps: sorry for my bad english

    0 0

    I have the code below, everything pretty much works, but the issue I'm running into:

    When I get to record 25 in the scroll the AJAX call is executed again, causing the table to refresh. Currently it returns 87 records, which means 26-87 is never displayed.

    The back end returns all the data when called, as such I can't page, nor can I handle lazy loading at record 26. How do I get the datatable to display/scroll through all 87 rows before executing the AJAX call?

        var recentPlatformTable;
        var api;
        var curRow = 0;
        var timer;
        $(document).ready(function () {
            recentPlatformTable = $('#recentPlatformTable').dataTable({
                lengthChange: false,
                iDisplayLength: -1,
                serverSide: true,
                ajax: {
                    url: "/account/GetRecentPlatformBookings",
                    contentType: 'application/json; charset=utf-8',
                    type: "POST",
                    data: function (data) {
                        curRow = 0;
                        return data = JSON.stringify(data);
                processing: true,
                paging: true,
                searching: false,
                sorting: false,
                "scrollY": "170px",
                "scrollCollapse": false,
                "ordering": false,
                deferRender: false,
                columns: [
                    { "data": "ID" },
                        "data": "HotelName",
                        render: function (data, type, row) {
                            return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
                        "data": "HotelCity",
                        render: function (data, type, row) {
                            return '<div style="white-space: nowrap; overflow:hidden; text-overflow:ellipsis;width:100px;">' + data + '</div>';
                    { "data": "HotelState" },
                    { "data": "ReservationTotal" },
                    { "data": "CustomerSavings" },
                    { "data": "GrossProfit" },
                    { "data": "EstimatedMatrixPayout" },
                    { "data": "EstimatedTACPPayout" },
                    { "data": "EstimatedCompanyShare" }
                responsive: false,
                info: false,
                scroller: true,
                "footerCallback": function (row, data, start, end, display) {
                    api = this.api();
            $('.dataTables_scrollBody').css('overflow', 'hidden');
        function setTimer() {
            if (timer) {
            timer = setInterval(function () {
                if (api === undefined)
                var num_rows =;
                curRow += 1;
                console.log("*****row " + curRow + " of " + num_rows);
                if (curRow > num_rows) {
                else {
                    api.settings().scroller().scrollToRow(curRow, 1000);
                    console.log(api.rows({ page: 'current' }).data());
            }, 1000);

    0 0
  • 03/21/18--04:14: PDF export images
  • Hi to all,

    I exported the table data into pdf.I have an image column in the table.
    After exporting this column appears as blank column instead of holding images.

    How i can encode my images to base64 format?

    This is a repeated question.I am unable to get pdfmake API site.



    0 0

    I am trying to fetch data from a table of size 9 GB + and having millions of records. I'm populating DataTable with that data. I am getting the records in chunks from the table i.e 10 per page through Ajax and SQL Limit query.

    In the above image you can see We have 223,740 pages so when i try to access the last page the query takes forever to load the data. However data loads quicker when i try to access first pages. But accessing higher offset pages directly takes forever to load.

    public static function getAllEvaluationsWithNameForDataTable($start){
            $queryBuilder = new Builder();
            return  $queryBuilder
                ->from(array('e' =>  static::class))
                ->leftJoin('Cx\Framework\Models\Common\User\CxUser',  'e.cx_hc_user_id =', 'u')
                ->columns(', e.first_name, u.initials as assigned_coach, e.gender,,, e.age, e.version, e.evaluation_status, e.ip_address, e.date_created, e.date_updated')
                ->orderBy(' asc')
                ->limit(10, $start)

    PHP Controller:

    public function getEvaluationsAction() {
            // Enable Json response
            // This action can be called only via ajax
            // Forward to access denied if current user is not allowed to view evaluation details
            if (!$this->CxAuth->currentUserIsAllowedTo('VIEW', CxEbEvaluation::getClassResourceName()))
                return $this->forwardToAccessDeniedError();
                $start = $this->request->get('start');
                $start = 10;
            $recordsTotal = count(CxEbEvaluation::getAllForDataTable(array('id')));
            //Get Evaluations from DB
            $evaluation_quizzes = CxEbEvaluation::getAllEvaluationsWithNameForDataTable(intval($start));
            //for getting base URL
            $url = new Url();
            $data = array();
            foreach ($evaluation_quizzes as $key => $quiz) {
                $data[ $key ][ 'id' ] = $quiz[ 'id' ];
                $data[ $key ][ 'first_name' ] = $quiz[ 'first_name' ];
                if($quiz[ 'assigned_coach' ]){
                    $data[ $key ][ 'assigned_coach' ] = $quiz['assigned_coach'];
                    $data[ $key ][ 'assigned_coach' ] = "Not assigned";
                $data[ $key ][ 'gender' ] = $quiz[ 'gender' ];
                $data[ $key ][ 'email' ] = $quiz[ 'email' ];
                $data[ $key ][ 'phone' ] = $quiz[ 'phone' ];
                $data[ $key ][ 'age' ] = $quiz[ 'age' ];
                $data[ $key ][ 'version' ] = $quiz[ 'version' ];
                $data[ $key ][ 'quiz' ] =  $url->get('/admin/get-evaluation-quiz-by-id');
                $data[ $key ][ 'manage-notes-messages-and-calls' ] =  $url->get('/admin/manage-notes-messages-and-calls');
                $data[ $key ][ 'date_created' ] = date("m/d/Y H:i:s", $quiz[ 'date_created' ]);
                $data[ $key ][ 'evaluation_status' ] = $quiz[ 'evaluation_status' ];
            // Return data array
            return array(
                "recordsTotal"    => $recordsTotal,
                "recordsFiltered" => $recordsTotal ,
                "data"            => $data //How To Retrieve This Data
            // Return data

    JS: = $CxRecordsTable.cxAdminDataTable({
            ajaxUrl: '<?php echo $this->CxHelper->Route('eb-admin-get-evaluations')?>' + eqQuizIdQueryString,
            serverSide: true,
            processing: true,
            recordsFiltered :true,
            columns: [
                cx.common.admin.tableEditColumn('id',{ delete: true }),
                { data: 'first_name' },
                { data: 'assigned_coach' },
                { data: 'gender' },
                { data: 'email' },
                { data: 'phone' },
                { data: 'age' },
                cx.common.admin.tableLinkColumn('quiz', quizLinkOptions),
                cx.common.admin.tableEditColumn('id', healthCoachLinkOptions),
                cx.common.admin.tableLinkColumn('manage-notes-messages-and-calls', manageNotesMessagesAndCalls),
                { data: 'date_created' },
                cx.common.admin.tableSwitchableColumn('evaluation_status', {
                    editable: true,
                    createdCell: function (td, cellData, rowData, row, col){
                    onText: 'Complete',
                    offText: 'In progress'
                enabled: false
            },          success: function (data) {
                    else {

    RAW Query:

    SELECT` AS id, e.first_name AS first_name,
            u.initials AS assigned_coach,
            e.gender AS gender, AS email, AS phone,
            e.age AS age, e.version AS version,
            e.evaluation_status AS evaluation_status,
            e.ip_address AS ip_address, e.date_created AS date_created,
            e.date_updated AS date_updated
        FROM  evaluation_client AS e
        LEFT JOIN  cx_user AS u  ON e.cx_hc_user_id =
        ORDER BY ASC
        LIMIT  :APL0 OFFSET, :APL1

    0 0

    I'm using some default ccs/js files for customized buttons and styling (for styles: jquery-ui.css, dataTables.jqueryui.min.css, buttons.jqueryui.min.css), and I encountered a problem.

    In init js, I have this line:

    dom: 'lBfiptip',

    And it seems to interfere with jqueryui style, in which some elements have darker background and probably larger distances between lines.

    My guess is, that this can be somehow fixed, by formatting the dom option with other parameters. I'd like to keep the "lBf" as it is now, on white background, but I'd like add some formatting (class?) to "ip" segments. How to remake this don line to achieve that?

    Yes, I saw this:

    But I'm unsuccesful with my experimentation for now.

    0 0
  • 11/09/18--11:06: Custom editor
  • Good afternoon
    I'm trying to create a search engine to be able to select a record within a custom editor: template: '#customForm',
    The field I want to filter is:
    <editor-field name = "tb_palabra []. id"> </ editor-field>
    I would appreciate any surgency.
    A greeting.

    0 0

    When the browser is resized, then dom elements follow view width. I'd like to keep them within table width.

    0 0

    "language": {"url": "mylanguage.json"},

    seems to work on firefox and ios safari, but not at all on chrome. any reasons why?

    0 0

    I'm using this parameter:

    "columnDefs": [ {"targets": 0, "width": "200"}, {"targets": 1, "width": "80"}, {"targets": 2, "searchable": false}, {"targets": [3, 4, 5, 6], "searchable": false, "visible": false}],

    first 2 columns are always visible, and visibility of third is switched by buttons

    everything seems to work with the exception of width parameter on ios safari. when I change page, column widths chage randomly.

    I also have these lines in head section:

    "autoWidth": false,

    and in general

    <meta name="viewport" content="800", initial-scale=1.0>

    0 0

    @allan, you reference in this post:

    that multi-level grouping has been committed for RowGroup in Github.

    Do you have an estimate as to when it will be released?

    Also, when selecting the category for this post, I noticed that RowGroup is not an option among the extensions.


    0 0
  • 11/15/18--02:55: Dropdown with editor
  • I knew that there is an example of this in this:
    But it uses join of the tables where all dropdown having the same values.

    I want to know if there are any other examples where all the dropdown has different values.
    It will be good if the values of the dropdown are filled by the response of json (no use of join).

    0 0

    I have a table, it contain with few ID. For example, if ID = 3, we call it village, and if ID = 4, we call it sub district. I use this code :

    $(document).ready(function() {
        $('#table_kelurahan').DataTable ({
        ajax: {
            url     : "deffer.php",
            dataSrc : ""
        columns: [
                "data": null,
                "defaultContent": "",
                "targets": -1
            { data: "provnama" },
            { data: "kabnama" },
            { data: "kecnama" },
            { data: "kelnama" },
            { data: "id_jenis" }
        deferRender: true,
        responsive: true,
        lengthMenu: [[5,10, 25, 50, -1], [5,10, 25, 50, "All"]]

    So, how i can print my id from number (3 or 4), into something like ( village and sub district ) in datatable ?

    0 0
  • 11/17/18--22:55: Pipelining & Exporting
  • Hi,
    how does it work with exporting to excel? do we get the full dataset or just the cached?

    0 0

    I have a selectbox, that I want to use in my serverside processing of each ajax request sent through.

    I have the below:

              $('#example').dataTable( {
                   "ajax": {
                     "url": "data.json",
                     "data": {
                         "myfilter": $('#otherfilter').children("option:selected").val()
                 } );

    My issue is when the page loads the value is 1. And even if I change it after, the ajax request keeps sending 1, it never re-updates to on each request.

    Any ideas please.

    0 0

    So this is my problem. I have a datatable with an input based searchable tfoot.
    But only once in a while the table foot aligns with the table body cells.
    Most of the times it's like this:

    -> new info: after table reload it get 'normal' again.

    After some page reload attempts it gets like this (like how it's supposed to be right?)

    How can this be solved? Or debugged? (applied filters don't affect, it was just for demo). :smile:
    My columns are set as:
    columns = [{... , ... , width: "XX%"}, ...],

    Thank you.

older | 1 | .... | 2254 | 2255 | (Page 2256) | 2257 | 2258 | .... | 2326 | newer