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

footercallback does not calculates the column value

$
0
0

It works fine on live.datatables but it does not workout in the development environment (too many fields are used), though i used numeral.js script
reference:

here is my code:

       "footerCallback": function ( row, data, start, end, display ) {
            var api = this.api();
 
            // Remove the formatting to get integer data for summation
            var intVal = function ( i ) {
                return typeof i === 'string' ?
                    i.replace(/[\MB,KB,GB,TB,]/g, '')*1 :
                    typeof i === 'number' ?
                    numeral(i).value() : i;
            };
 
            // Total over all pages
            total = api
                .column( 3 )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            // Total over this page
            pageTotal = api
                .column( 3, { page: 'current'} )
                .data()
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0 );
 
            total = numeral(total).format('0.0a');
            pageTotal = numeral(pageTotal).format('0.0a');
          $( api.column( 3 ).footer() ).html(
             '--'+pageTotal +' ( --'+ total +' total)'
            );
        }

Please let me know where did i go wrong?

Thanks
Koka


How to set css or background color of row on hover

$
0
0

I am trying to add the style on table row hover but it is not applied. Please suggest what is wrong with this code:

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

function BuildDatatable()
{
$.ajax({
type: "POST",
url: "Handlers/DatatableHandler.ashx",
data: {operationType: 'Columns' },
success: function (data) {
result = JSON.parse(data);
$('#tblEmployee').DataTable({
processing: true,
serverSide: true,
responsive: true,
searching: false,
lengthChange: false,
order: [[defaultSortColumnIndex, 'desc']],
pageLength: 10,
ajax: {
"url": "Handlers/DatatableHandler.ashx",
"postData": { operationType: 'edata' },
"type": "POST",
"datatype": "json"
},

                    columns: result,
                    columnDefs: [
                        {
                            targets: 0,
                            render: function (data, type, row) {
                                if (type === 'display') {
                                    return '<input type="checkbox" class="editor-active">';
                                }
                                return data;
                            }
                        }
                    ]

                });
            }              
        });

}

This above code works fine but when I write this:

$(document).ready(function() {
var table = $('#tblEmployee').DataTable();

$('#tblEmployee tbody').on( 'hover', 'tr', function () {
    if ( $(this).hasClass('selected') ) {
        $(this).removeClass('selected');
    }
    else {
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
} );

});

The table does not render and it shows error 'Cannot read property 'aDataSort' of undefined'. Please note that I already have on click and on double click events also.

I want to add the css or background color of the row on hover, please advise.

whole page is reloading when clicking pagination in datatable instead of moving to next page in php

$
0
0

i have used basic datatable script but i getting this problem.But if i click column header and again i click the pagination in datatable the pagination is working fine.How to solve this.Kindly give tips.Thanks in advance

```

$('#long_schd_table').DataTable({

});

Why the export button has blue color

$
0
0

Hi guys

Please help. I just add additional export button in datatables script for export to word problem is it has color blue? Do i miss something. thanks

Unable to download using html5 bottons

$
0
0

Hi, I am using html5 buttons to download table data. Table contains around 4900 rows. It works for rows until 4670 but if it’s more than that and when I click the button it’s showing loading icon in the button and nothing happened after that. This issue is happening only in chrome browser. Any restriction on the rows in chrome? Thanks for the help.

How can i do an editor form on two tables?

$
0
0

Hello everybody.
I have 2 tables T1 and t2 linked by a join (foreign key from T1.t2_id to t2.id). I created 2 editor forms for ech tables. In the T1 editor form i have a select type field for selecting a t2 id.
But I wish I could create a new t2 id from the T1 editor form if in the select the t2 id is not present.
How i do something like that. Is it possible to call and insert the t2 editor form inside the T1 editor form?
how would you do this ?
Thanks for your help and have a nice day
Lionel

select2: double initialValue request?

$
0
0

Hello,

I have an editor that's displayed on the page using the onPageDisplay function. Some of the fields are select2 objects using ajax as data source.
When the form is shown, I see 2 initialValue requests for each of the select2 fields ("http://localhost:53686/Registraties/getOptions/TYB?initialValue=true&value=%22%22"). Is this to be expected?
(Sorry, but I can't make this accessible online to debug...)

The form is shown as follows:

        editor
            .buttons({
                label: "Save",
                fn: function () { this.submit(); }
            })
            .create(1, true, {
                focus: null
            });

Example of a select2-field definition:

                {
                    "label": "type behandeling",
                    "name": "TYB",
                    "type": "select2",
                    "opts": {
                        placeholder: '...',
                        ajax: {
                            dataType: "json",
                            url: '/Registraties/getOptions/TYB',
                            data: function (params) {
                                return {
                                    productid: ProductID
                                };
                            },
                            processResults: function (data) {
                                return {
                                    results: data
                                };
                            },
                        }
                    }

                }

Invalid JSON response

$
0
0

I'm going crazy for an "Invalid JSON response" error that I can not understand...
Chrome debug->network shows this message:

Notice: Undefined index: order in C:\inetpub\wwwroot\test\php\Editor.php on line 1567
{"data":[{"DT_RowId":"row_1","visite":{"vis_user":"4","vis_data":"10-11-2018","vis_cli":"5","vis_esito":"0"},"utenti":{"ute_user":"Admintest"},"clienti":{"cli_ragsoc":"Abcdefg"}}],"options":[],"files":[],"draw":1,"recordsTotal":"1","recordsFiltered":"1"}

$(document).ready(function() {
    var table = $('#visite-all-home').DataTable( {
        responsive: true,
        processing: true,
        serverSide: true,
        ajax: {
            url: "php/visite-all-home.php",
            type: "POST"
        },  
        columns: [
            {data: "visite.vis_data"},
            {data: "utenti.ute_user"},
            {data: "clienti.cli_ragsoc"},   
            {data: "visite.vis_esito", 
                render: function ( val, type, row ) {
                    return val == 0 ? "Negativo" : "Positivo";
                                }
            }
        ],
        select: false,
        searching: false, 
        ordering: false,
        paging: false,
        info: false,
        language: {
            emptyTable:     "Nessun dato presente nella tabella",
            zeroRecords:    "Nessun dato presente nella tabella"
        }
    } );
} );

include( "DataTables.php" );

use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

Editor::inst( $db, 'visite', 'vis_id' )
    ->fields(
        Field::inst( 'visite.vis_user' ),
        Field::inst( 'utenti.ute_user' ),
        Field::inst( 'visite.vis_data' )
            ->getFormatter( Format::dateSqlToFormat( 'd-m-Y' ) ),

        Field::inst( 'visite.vis_cli' ),    
        Field::inst( 'clienti.cli_ragsoc' ),
        Field::inst( 'visite.vis_esito' )
    )
    ->leftJoin( 'utenti', 'ute_id', '=', 'visite.vis_user' )
    ->leftJoin( 'clienti', 'cli_id', '=', 'visite.vis_cli' )
    ->process( $_POST )
    ->json();
?>

TABLE `visite`
`vis_id` int(10) UNSIGNED AUTOINCREMENT NOT NULL,
`vis_user` smallint(5) NOT NULL,
`vis_cli` mediumint(8) NOT NULL,
`vis_data` datetime DEFAULT NULL,
`vis_esito` tinyint(3) DEFAULT '0' COMMENT '0=esito negativo, 1=esito positivo, 2=firmato contratto'

INSERT INTO `visite` (`vis_id`, `vis_user`, `vis_cli`, `vis_data`, `vis_esito`) VALUES
(1, 4, 5, '2018-11-10 00:00:00', 0);

PRIMARY KEY (`vis_id`),
KEY `visit_cli` (`vis_cli`),
KEY `visit_user` (`vis_user`),
KEY `visit_date` (`vis_data`),

It seems like a very simple program ... I'm probably tired and I can not find a trivial mistake, but I'm frustrated ...
Thanks to those who help me understand,

Giuseppe


Sort by multiple criteria for same column

$
0
0

I have a column that looks like this :

0      // Red colored
0      // Red colored
0 (1)  // Orange colored
0 (2)  // Red colored
0      // Orange colored
0      // Red colored
0 (24) // Orange colored
0 (4)  // Red colored
0      // Orange colored
0 (3)  // Orange colored
1     
1
1 (7)
2
2 (3)
2
... etc

I would get the following order :

0      // Red colored
0      // Red colored
0      // Red colored
0 (24) // Red colored
0 (4)  // Red colored
0 (2)  // Red colored
0      // Orange colored
0      // Orange colored
0 (4)  // Orange colored
0 (1)  // Orange colored
1     
1
1 (7)
2
2 (3)
2
... etc

I want to order this column in datatables using these 3 criteria : first order by number (0's), then by color (red first), then by number un parantheses (the highest first).

I've got in each data-order the following format : 0r24 which means the first number is zero, the color is red, the number in the parantheses is 24. Repeat for all others.

I tried to play with the columnDefs attribute of Datatables to get my result by doing the following :

"columnDefs": [
    {
        "type": "num-fmt", 
        "targets": 7
    }, {
        "targets": [7], 
        "render": function ( data, type, row, meta ) {
            return type === 'sort' ?
                   row[7]['@data-order'].replace(/r/g,'0').replace(/o/g,'1') : row[7]['@data-order'];
         }
     }
]

Here I am trying to replace the letters o and r with 0 and 1 to be able to have an all numeric value for it to order upon, but it doesn't work. Any idea how to make this work and do the following as I explained?

IE11, excel download is strange

$
0
0

good working in chrome browser...but on the IE11....
comment 'problem with the content','Do you want to restore the contents of this workbook as much as possible?' when open excel downloaded from datatables....
help me please....

Map values in a column

$
0
0

Hi,
i wonder how i could map-correlate-display in a column other values than the ones from database.

For example,i have values 0 and 1 from DB and i want to display "CORRECT" , "WRONG".

Is this possible with column render?or should i use enum.js?Is there an easier way?

Thank you.

On sorting the rows by columns the function gets overridden with the default function

$
0
0

before sorting
function works fine
after sorting
function gets overrriden
here is my code;
<script type="text/javascript"> $(document).ready(function() { $('#tablename').DataTable.ext.pager.numbers_length = 5;// For setting pagination with elipses(...) var table= $('#tablename').DataTable( { "initComplete": function( settings, json ) { updateServiceButtons(); }, "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]], "pagingType": "full_numbers", "processing": true, "serverSide": true, "ajax":"../tablename_ajax_d/serverSide.php", "columns": [ { "data": "mm_sno" }, { "data": "system_name" }, { "data": "ip_address" }, { "data": "service_name" }, { "data": "service_status" }, { "data": "date" }, { "data": null }, { "data": null } ], "columnDefs": [ { "targets": -2, "data": null, "defaultContent":<button id ="restart-service" class="btn btn-success" data-toggle='modal' data-target='#service-start-stop-modal'>Restart</button>`

                  },
                {
                    "targets": -1,
                    "data": null,
                    "defaultContent": `<button id ="stop-service" class="btn btn-danger" data-toggle='modal' data-target='#service-start-stop-modal'>Stop</button>`
                  }
            ],
rowCallback: function(row, data, index){
    if(data.service_status=='running'){
    $(row).find('td:eq(2)').css('color', 'GREEN');
    }
    else if(data.service_status== 'failed'){
    $(row).find('td:eq(2)').css('color', 'red');
    }
}
} );

$('#tablename tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
var type = $(this).attr('id').includes('restart') ? 'restart' : 'stop';
host_url = url1
$.ajax({
type: "GET",
url: url2,
success: function(result){
try{
var res = $.parseJSON(result);
if(res){
$(".modal-body").html(Service ${data['service_name']} is successfully ${type}ed);
}else{
$(".modal-body").html(${res});
}
}
catch(error){
$(".modal-body").html("something went wrong");
}
}
});
});
} );
function updateServiceButtons(){
var rows = $("tbody").find("tr");
const RUNNING_STATE = 'running';
for(var i=0; i<rows.length; i++){
var elem = $($("tbody").find("tr")[i]);
if(elem.find(".service-status").text() == RUNNING_STATE){
elem.find("#restart-service").attr("disabled","disabled");
elem.find("#stop-service").removeAttr("disabled");
}else{
elem.find("#stop-service").attr("disabled","disabled");
elem.find("#restart-service").removeAttr("disabled");
}
}
}
</script>``
Thanks
Koka

Collapse / Expand Click Groups

$
0
0

Hi all together,

https://datatables.net/extensions/rowgroup/examples/initialisation/customRow.html

I like to have a possibility to click on the group name like "Averages for Edinburgh" and the group should expand/collapse. Per default when loading the site, the group should be collapsed.

For doing that, I also found this thread here, where redwall was able to embed such a function for his DataTable:
https://datatables.net/forums/discussion/comment/61474/#Comment_61474

But my Javascript skills are less than available :)

Would someone of you be so kind and help me out here? How can I reach the above described functionality on the basic example of "Custom row rendering / aggregates"?

Thank you for your help!!

searchbox not work when reading data from another table

$
0
0

i have table in database with rows below

id,type,cat,contact_id,user_id,time_stamp  

datatables jquery i use

var dt =  $( '#files' ).DataTable( {
    iDisplayLength: <? echo $jadvalshow ?>,
    "aLengthMenu": [[25, 50, 100], [25, 50, 100]],

        dom: 'lBfrtip',
        buttons: [
            'csv', 'excel',  'print'
        ],
            "order": [
                [ 0, "desc" ]
            ],
        "search": {
"smart": false
},
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "lead-list.php?grpid=<? echo $groupid?>&post=1&uid=<? echo $userid?>",
                "type": "POST",

            },

            "columns": [ 
                {
                    "data":null,
                    "class":          "details-control",
                    "defaultContent": "",

                },{
                    "data": "shomare"
                },  {
                    "data": "type"
                }
                ,  {
                    "data": "cat"
                }, {
                    "data": "contact_id"
                }, {
                    "data": "nahve"
                }, {
                    "data": "erja"
                }, {
                    "data": "user_id"
                }, {
                    "data": "time_stamp"
                },
                {
                    "data": "id"
                }, 


            ]
        } );

in datatables search everything work perfectly but
my php code

    $table = 'lead';

// Table's primary key
$primaryKey = 'id';
$colnowid = 2;
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case object
// parameter names
include_once( 'jdf.php' );
include_once( 'config.php' );
$columns = array(
    array(
        'db' => 'id',
        'dt' => 'shomare',
        'formatter' => function ( $d, $row ) {


            global $colnowid;
            $colnowid = $d;
            return  '<a href="lead-view.php?id='.$d.'">'.$d.'</a>';




        }
    ),
    array(
        'db' => 'id',
        'dt' => 'id',
        'formatter' => function ( $d, $row ) {


            if(1 == 1 ){
            return  '<a href="lead-add.php?id='.$d.'">ویرایش</a> ';
            }


        }
    ),
    array(
        'db' => 'type',
        'dt' => 'type',
        'formatter' => function ( $d, $row ) {
            global $colnowid;
            return '<a href="lead-view.php?id='.$colnowid.'">'.$d.'</a>';
        }
    ),
    array(
        'db' => 'cat',
        'dt' => 'cat',
        'formatter' => function ( $d, $row ) {
            return $d;
        }
    ),
    array(
        'db' => 'contact_id',
        'dt' => 'contact_id',
        'formatter' => function ( $d, $row ) {
            if ( !isset( $db ) ) {
                $db = db();
            }
            if($d != ''){

                $c = qselect("select name from sazman where id = $d limit 1",$db);
                }
                return $c['name'];
            }else{ return '';}
        }
    ),

    array(
        'db' => 'nahve',
        'dt' => 'nahve',
        'formatter' => function ( $d, $row ) {
            return $d;

        }
    ),
    array(
        'db' => 'erja',
        'dt' => 'erja',
        'formatter' => function ( $d, $row ) {
            if ( !isset( $db ) ) {
                $db = db();
            }
            $d = explode(',',$d);
            $dtxt = '';
            foreach($d as $dnow){
                if(is_numeric($dnow)){
                    $getuser = getusers($db,$dnow);
                    $dtxt .=','.$getuser[1];
                }
            }
            return substr($dtxt,1);
        }
    ),

    array(
        'db' => 'user_id',
        'dt' => 'user_id',
        'formatter' => function ( $d, $row ) {
            if ( !isset( $db ) ) {
                $db = db();
            }
            $c= qselect("select name from user where id = $d limit 1",$db);
            return $c['name'];
        }
    ),
    array(
        'db' => 'time_stamp',
        'dt' => 'time_stamp',
        'formatter' => function ( $d, $row ) {
            return jdate('Y/m/d G:i',$d);

        }
    )

);

// SQL server connection information
$sql_details = array(
    'user' => $dbuser,
    'pass' => $dbpass,
    'db' => $dbname,
    'host' => 'localhost'
);

require( 'ssp.class.php' );
$db = db();
echo json_encode( SSP::simple( $_POST, $sql_details, $table, $primaryKey, $columns ) );die;

codes work perfectly
table show perfectly
everything work perfect just its do not search for contact name and user name because i calling them from other table in database
i searched a lot in google for solving this problem but did not find any answer
Im confused because most tables keep id from other other tables so how nobody had this problem before?
any suggestion for this?

Date range filters

$
0
0

Hi there,

I have the users table with the registered date.

I need to create date range filters based on the registered date. So filters are gonna be like From: To:. Any idea how can I easily achieve it? Also, I need to use datepicker from jQuery UI (1.10.3).

Thanks,
Marcin


add one more search box as additional search

$
0
0

Hi,

I am using datatable version 1.9.4.

I have implemented datatable without ajax on simple table html. There is a default search box which search for all columns. I want to show one more custom drop down field with some custom values. On select dropdown value, it should search from current showing data (all columns and rows). It should search same as working default search.

My js code is given below:-

$('#data_Table').dataTable( {
"iDisplayLength": 50,
} );

Method Destroy many datatables in same page

$
0
0

I have in my page, many tables. They are initialized with DataTables jquery with keytable plugins. When i use method $("#mytable1").DataTable().destroy()in a espefic table, all others lose keytable. Anybody know why this happing?

RowGroup custom rendering and data source change event combined?

$
0
0

Hi all together,

I combined the custom rendering and the Data source change event examples from this page: https://datatables.net/extensions/rowgroup/examples/

Instead of average salary in the custom rendering example, I used the sum() function to have the sum of salary for each city.

I now need to have a sort option which will sort the groups using the summed up value. When I now click on the last column the single elements in each city will be ordered, but I need the whole groups ordered using the summed up values.

So, e.g. London is the city with the highest over all salaries, the "London group" should be up, next the second highest salary group and so on.

This is my current script: https://pastebin.com/KkwYcmNG

Hope you can help me out here! I tried to built an example in jsfiddle, but I wasn't able to get the custom rendering example running on jsfiddle. If you have a jsfiddle link with this example running I am happy to add all further details of my code.

Thank you so much!

SyntaxError: unexpected token: '{' in datatables.css:16:16

$
0
0

Hi,
I am getting the error msg as indicated by the title of this Question. My html file is as follows. My table '#word_freq_table' is defined in one of my js files.
Could anybody help please? Thank you in advance.
best regards
Jim

Here is my html file:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/datatables.js"></script>
<script type="text/javascript" src="js/datatables.css"></script>

<script src="js/hilitor.js"></script>
<script src="js/sorttable.js"></script>

<script src="js/word_freq.js"></script>
<script src="js/json_to_table.js"></script>

<script src="bower_components/underscore/underscore.js"></script>
<script src="js/lemmatizer.js"></script>
<link rel="stylesheet" type="text/css" href="js/styles.css">

<script type="text/javascript">

    $(document).ready(function() {
        $('#word_freq_table').DataTable();
    });

</script>

</head>

<body>

<div  class=col_left>
  <div class=upper_left>
    Paste your passage here:<p>
    <textarea id=input_passage onchange=output_freq(this.value)></textarea>
    <p>
    <button type=submit id=analyse onclick=output_freq(document.getElementById('input_passage').value)> Analyse</button>
    <p>
  </div>
 
  <div id=freq></div>

</div>

<div id=output_passage class=col_center></div>

<div id=right_col class=col_right></div>

<script>

</script>

</body>
</html>

Module not found: Error: Can't resolve 'datatables.net-buttons'

$
0
0

While using buttons.colVis.min.js in python Module not found: Error: Can't resolve 'datatables.net-buttons' error is showing while building webpack

import order is given below

import d3 from 'd3';
import dt from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
import './fixedHeader.dataTables.min.css';
import './colReorder.dataTables.min.css';
import './buttons.dataTables.css';

import { fixDataTableBodyHeight, d3TimeFormatPreset } from '../javascripts/modules/utils';
import './report.css';
import './dataTables.rowGroup.min.js';
import './dataTables.select.js';
import './dataTables.buttons.js';
import './buttons.colVis.min.js';
import './dataTables.fixedHeader.min.js';
import './dataTables.colReorder.min.js';
import bootbox from './bootbox.min.js';
import toastr from './toastr.js';
import './toastr.css';
//import './dataTables.rowGroup.js';
import { sectionsToRender } from '../javascripts/explore/stores/visTypes';

What is am doing wrong here?.Please help.

Viewing all 79597 articles
Browse latest View live




Latest Images