Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all 79551 articles
Browse latest View live

Sorting number with Text

$
0
0

Any idea on how I can get the text included with a number to be calculated when sorting? Ie,

https://codpool.com

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: https://datatables.net/examples/plug-ins/sorting_auto - 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'
        ]
    } );
} );

SmartAdmin DataTables - How to add checkboxes to rows?

$
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 ( https://datatables.net/extensions/select/examples/initialisation/checkbox), trying to guess how SmartAdmin might have handled checkboxes, but nothing I've tried has worked.

Here is what my code currently looks like:

              <sa-datatable
                [options]="{
                  data: sysMsgs,
                  columns: [
                  {data: 'rowid'},
                  {data: 'senderID'},
                  {data: 'message'},
                  {data: 'dateCreated'}
                  ],
                  buttons: [
                    'copy', 'csv', 'pdf', 'print'
                  ]
                }"
                tableClass="table table-striped table-bordered table-hover"
              >
                <thead>
                <tr>
                  <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>
                </tr>
                </thead>
              </sa-datatable>

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?

Thanks.
Bob

DataTables as inline table with responsive extension

$
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 http://live.datatables.net/rinorupo/3/edit?html,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 https://datatables.net/manual/styling/classes or another solution?

datatables.net node.js editor example won't run with oracledb through knex

$
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!

Server Side Processing?

$
0
0

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
http://live.datatables.net/diyariwa/31/edit

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
https://editor.datatables.net/examples/advanced/REST.html
https://editor.datatables.net/examples/inline-editing/serverSide.html

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

Thanks,
Saidulu

start paramater pass to the server on get post request

$
0
0

Hi,
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

Prevent loading while scrolling

$
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;
                    setTimer();
                    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_paginate').hide();
        $('.dataTables_scrollFoot').hide();
        $('.dataTables_scrollBody').css('overflow', 'hidden');
    });

    function setTimer() {
        if (timer) {
            clearInterval(timer);
        }

        timer = setInterval(function () {
            if (api === undefined)
                return;

            var num_rows = api.page.info().recordsTotal;
            curRow += 1;
            console.log("*****row " + curRow + " of " + num_rows);

            if (curRow > num_rows) {
                console.log("*****Reloading");
                clearInterval(timer);
                recentPlatformTable.DataTable().ajax.reload();
            }
            else {
                api.settings().scroller().scrollToRow(curRow, 1000);
                console.log(api.rows({ page: 'current' }).data());
            }
        }, 1000);
    }

PDF export images

$
0
0

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.

Thanks

Subi


How to optimize limit query to access data faster from a huge table?

$
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.

https://i.stack.imgur.com/6sTpF.png

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.id', 'u')
            ->columns('e.id, e.first_name, u.initials as assigned_coach, e.gender, e.email, e.phone, e.age, e.version, e.evaluation_status, e.ip_address, e.date_created, e.date_updated')
            ->orderBy('e.id asc')
            ->limit(10, $start)
            ->getQuery()
            ->execute()
            ->toArray();
}

PHP Controller:

public function getEvaluationsAction() {
        // Enable Json response
        $this->setJsonResponse();
        // This action can be called only via ajax
        $this->requireAjax();

        // Forward to access denied if current user is not allowed to view evaluation details
        if (!$this->CxAuth->currentUserIsAllowedTo('VIEW', CxEbEvaluation::getClassResourceName()))
            return $this->forwardToAccessDeniedError();

        if(isset($_GET['start'])){
            $start = $this->request->get('start');
        }else{
            $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'];
            }else{
                $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:

cx.common.data.cxAdminDataTables.EbEvaluation = $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){
                    $(td).data('evaluation-status-id', rowData.id);
                },
                onText: 'Complete',
                offText: 'In progress'
            })
        ],
        toolbarOptions:{
            enabled: false
        },          success: function (data) {
                            cx.common.data.cxAdminDataTables.EbEvaluation.cxAdminDataTable("reloadAjax");
                        }
                    });
                }
                else {
                    $row.removeClass('alert');
                }
            });
        }
    });

RAW Query:

SELECT  e.id` AS id, e.first_name AS first_name,
        u.initials AS assigned_coach,
        e.gender AS gender, e.email AS email, e.phone 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 = u.id
    ORDER BY  e.id ASC
    LIMIT  :APL0 OFFSET, :APL1

dom styling vs styles (some problem/conflict)

$
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: https://datatables.net/reference/option/dom

But I'm unsuccesful with my experimentation for now.

Custom editor

$
0
0

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.

is there a way to keep dom elements fixated to the page width and not view width?

$
0
0

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

google chrome and internationalization

$
0
0

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

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

column visibility and column width

$
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>

Multi-level rowGroup available yet?


Dropdown with editor

$
0
0

I knew that there is an example of this in this: https://editor.datatables.net/examples/inline-editing/join.html
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).

Print ID number into string ?

$
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 ?

Pipelining & Exporting

$
0
0

Hi,
how does it work with exporting to excel? do we get the full dataset or just the cached?

ajax.data with updating value

$
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.

Is it normal that dataTables_scrollFoot not being aligned after page reload?

$
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.

Viewing all 79551 articles
Browse latest View live




Latest Images