Quantcast
Channel: Free community support — DataTables forums
Viewing all 35414 articles
Browse latest View live

Export all rows using TableTools buttons

$
0
0

Hi,

I am using the legacy datatables (collective.js.datatables-2.0.1-py2.7.egg) in Plomino database.

We have around 1000+ rows and paginated. I am completely baffled as to why I am unable to export all the rows in my table. The TableTools example in this site exports all rows irrespective of pagination and I am using an exactly similar code. However, the export buttons are always exporting only the number of visible rows in the table.

This is the code I am using

"sDom": 'T<"clear">lfrtip',
"aLengthMenu":[[10,25,50,100,200,500,-1],[10,25,50,100,200,500,"All"]],
"bPaginate": true,
"bLengthChange": true,
"bSort": true,
"bFilter": true,
"bSmart": true,
"oTableTools": {
"oSearch": {"sSearch": "Initial search"},
"aButtons": [
"print",
"csv",
"xls"
],
"sSwfPath": "++resource++jquery.datatables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf"
}

As you can see, I am using the Length menu option as a temporary workaround to show all results and then click on the export button. Not a bad option but not slick either.

Can someone kindly let me know as to what I might be missing?

Thanks
Ash


Pagination and Display Length not working for Datatable (1.9.4)

$
0
0

Hi! I've scoured the internet to see if anyone else has come across my problem exactly. I've attempted several solutions such as adding iDisplayLength and sPaginationType, however I cannot seem to get it working at all. When the datatable loads, all entries are shown (even though the default show option is 10 in the dropdown). Using this dropdown does not change the dataset at all. Because of this, pagination also does not work.
Here is the code for the datatable:

$(document).ready(function () {
                    $datatable = $("#tblWeightPedometer").dataTable({
                        "bJQueryUI": true,
                        "sPaginationType": "full_numbers",
                        "bServerSide": true,
                        "iDisplayLength" : 10,
                        "sAjaxSource": "@Url.Action("AjaxHandlerPedometerWeight")",
                        "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
                        "aoColumns": [
                            {
                                "sName": "ID",
                                "mRender": function (data, type, row) {
                                    return $("#row-commands-id").html()
                                        .replace("id_to_replace", row[0])
                                        .replace("id_to_replace", row[0]);
                                }
                            },
                            {
                                "sName": "OwnerId",
                                "mRender": function (data, type, row) {
                                    return $("#row-commands-ownerid").html()
                                        .replace("OwnerUsername_to_replace", row[5])
                                        .replace("OwnerId_to_replace", row[1]);
                                }
                            },
                            {
                                "sName": "Weight",
                                "mRender": function (data, type, row) {
                                    return $("#row-commands-weight").html()
                                        .replace("weight_to_replace", row[3]);
                                }
                            },
                            {
                                "sName": "Steps",
                                "mRender": function (data, type, row) {
                                    return $("#row-commands-steps").html()
                                        .replace("completed_steps", row[2]);
                                }
                            },
                            {
                                "sName": "Date",
                                "mRender": function (data, type, row) {
                                    return $("#row-commands-date").html()
                                        .replace("date_to_replace", row[4]);
                                }
                            },
                            {
                                "sName": "Remove",
                                "mRender": function (data, type, row) {
                                    return $("#row-commands-removeWeightPedometerEntry").html()
                                        .replace("id_to_remove", row[0]);
                                }
                            }
                        ]
                    });

Another issue is at the bottom of the table it says:
Showing 0 to 0 of 0 entries (filtered from 14 total entries)
Could this also be related to the problem?

Thanks if anyone can help out, I would just like basic filtering (10,25,50,all) to work, along with pagination.

button overlay issue

$
0
0

When using the ‘column visibility’ button on an iPhone6 and iPad, it allows the client to toggle the various columns, but doesn’t take the client back to the webpage and execute the selection. (The feature works fine on other OS').

Sample page:
http://battle-calculator.com/jurassic-world/jurassic-world-dino-creature-statistics/

Thinking it may be an overlay issue,... I've tried the following:

.dt-button-background {
z-index: 999998 !important;
}
.dt-button-collection {
z-index: 999999 !important;
}

This did not help.

Please advise, thank you in advance.

If there is only one record, but the table info show "entries", is it ok?

$
0
0

If there is only one record, table info might be like this:
Showing 1 to 1 of 1 **entries** (filtered from 57 total entries)
Is it more precise to use "entry" instead of "entries"?

TypeError: table.row is not a function

$
0
0

Hi, I have the following error: TypeError: table.row is not a function
I'm trying to add a button in each column to modify different things, I'm following this example:
https://datatables.net/examples/ajax/null_data_source.html
My javascript code is as follows:

$(document).ready(function()
    {
        var table = $('#LosUsuarios').dataTable(
        {
            "language":
            {
                "url": "//cdn.datatables.net/plug-ins/1.10.12/i18n/Spanish.json"
            },
            "ajax":
            {
                "url": "usuarios/listadoUsuarios.php",
                "type": "POST"
            },
            "columns": [
                { "data": "Nombres" },
                { "data": "Apellidos" },
                { "data": "Usuario" },
                { "data": "Email" },
                { "data": "NombreRol" },
                {'defaultContent': '<button id="AdminUser" class="btn btn-success btn-sm">Editar <span class="glyphicon glyphicon-pencil"></span></button>'}
            ]
        });
        $('#LosUsuarios tbody').on('click', '#AdminUser', function()
        {
            var data = table.row($(this).parents('tr')).data();
            alert(data[0]);
        });
    });

You can see my table in the following link

sigeco.manueldardon.net/prueba.php

Thank you very much for the help

JSON not being parsed into a table

$
0
0

I am running, as much as possible, what I have found on this site. I've made a few modifications to make it work for me, and it does return JSON.

Here's the Debug

But the response is not being turned into a table. what am I not doing?

Here's my ServerSide.php:

<?php
$Page = '';
if (isset($_GET['PageName']))
{
    $Page = $_GET['PageName'];
}
elseif (isset($_POST['PageName']))
{
    $Page = $_POST['PageName'];
}
if($Page == '')
{
    $Page = 'TableHeadings';
}

include 'DBConn.php';
$headings = array();
$hsql = "select Headings from TableHeadings where TableName = '$Page' order by Id";
$getHeadings = $conn->query($hsql);
$rHeadings = $getHeadings->fetchALL(PDO::FETCH_ASSOC);
$CountHeadings = count($rHeadings);
$tsqlHeadings = '';
$ColumnHeader = array();
for ($row = 0; $row < $CountHeadings; $row++)
{
    $headings[$row] = $rHeadings[$row]["Headings"];
    $tsqlHeadings = $tsqlHeadings . "[" . $headings[$row] . '],';
}

foreach($headings as $index => $columnName)
{
    $ColumnHeader[] = array('db'=>$columnName,'dt'=>$index);
}

//DB table to use
$table = $Page;

//Table's primary key
$primaryKey = 'id';

//Array of database columns which should be read and sent back to DataTables
$columns = $headings;

//SQL server connection information
$sql_details = array(
    'user'=> 'User',
    'pass'=> 'Password',
    'db'=> 'DataBase',
    'host'=> 'Server');
$connectionInfo = array( "Database"=>$dbname, "UID"=>$username, "PWD"=>$password);
$conn = sqlsrv_connect( $servername, $connectionInfo );
if( $conn === false ) {
    die( print_r( sqlsrv_errors(), true));
}

// Get data to display 
$Query = "
    SELECT count($primaryKey) over() as Row_Count, ".str_replace(" , ", " ", implode(", ", $columns))."
    FROM   $table";

$rResult = sqlsrv_query( $conn, $Query );
if( $rResult === false) {
    die( print_r( sqlsrv_errors(), true) );
}

// Data set length after filtering
$iFilteredTotal = sqlsrv_num_rows( $rResult );

// Total data set length 
$sQuery = "SELECT COUNT($primaryKey)
    FROM $table";
$rResultTotal = sqlsrv_query( $conn, $sQuery );
$aResultTotal = sqlsrv_fetch_array( $rResultTotal, SQLSRV_FETCH_ASSOC);
$iTotal = $aResultTotal;

// Output
$output = array(
    "iTotalRecords" => $iTotal,
    "iTotalDisplayRecords" => $iFilteredTotal,
    "Data" => array());

while ( $aRow = sqlsrv_fetch_array( $rResult,SQLSRV_FETCH_ASSOC ) )
{
    $row = array();
    for ( $i=0 ; $i<count($columns) ; $i++ )
    {
        if ( $columns[$i] == "version" )
        {
            // Special output formatting for 'version' column 
            $row[] = ($aRow[ $columns[$i] ]=="0") ? '-' : $aRow[ $columns[$i] ];
        }
        else if ( $columns[$i] != ' ' )
        {
            // General output 
            $row[] = $aRow[ $columns[$i] ];
        }
    }
    $output['Data'][] = $row;
}
//http_response_code(606);

echo json_encode($output);
?>

Here's the RunningServerSide.php:

<?php
$Page = '';
if (isset($_GET['PageName']))
{
    $Page = $_GET['PageName'];
}
elseif (isset($_POST['PageName']))
{
    $Page = $_POST['PageName'];
}
include 'DBConn.php';
$headings = array();
$hsql = "select Headings from TableHeadings where TableName = '$Page' order by Id";
$getHeadings = $conn->query($hsql);
$rHeadings = $getHeadings->fetchALL(PDO::FETCH_ASSOC);
$CountHeadings = count($rHeadings);
$tsqlHeadings = '';
$ColumnHeader = array();
for ($row = 0; $row < $CountHeadings; $row++)
{
    $headings[$row] = $rHeadings[$row]["Headings"];
    $tsqlHeadings = $tsqlHeadings . "[" . $headings[$row] . '],';
}
$Edit = 0;
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title></title>
        <?php require 'StyleLinks.php'; ?>

        <?php include 'DataTableLinks.php'; ?>
    </head>
    <body>
        <table class="NormalTable display nowrap"  style="width: 100%; border: 1px" id="DataTable">
            <thead>
                <tr><?php echo "\n";
                        if($Edit == 1)
                        {?>
                    <th class="cell">Edit</th><?php       echo "\n";                          
                        }
                        foreach($headings as $heading)
                        {?>
                    <th class="cell"><?php echo $heading; ?></th><?php echo "\n";
                        }?>
                </tr>
            </thead><?php echo "\n";?>
        </table>
    </body>
</html>

Then the DataTables are initialized here:

<script>
    $(document).ready(function ()
    {
        $('#DataTable').DataTable(
      {
          "lengthMenu": [[25, 50, 75, 100, 150], [25, 50, 75, 100, 150]],
          "ScrollX": true,
          "dom": '<"top"Biflp<"clear">>rt<"bottom"ip<"clear">>',
          buttons: [{ extend: 'collection', text: 'Selection', buttons: ['selectAll', 'selectNone'] }, { extend: 'collection', text: 'Export', buttons: ['excel', 'csv', 'pdf']}],
          fixedHeader: { header: true, footer: false },
          select: true,
          "processing": true,
          "serverSide": true,
          "ajax": { "url": "ServerSide.php", "dataType": "json", "success": function(data){$('#DataTable').append(data);},"error": function(){alert("This has failed");} }
      });
    });
</script>

But I cannot get anything to actually show up. I've checked in Developer Tools for my browser and fixed all the errors that were in the console. The page ServerSide.php returns successfully and has a response like this:

{"iTotalRecords":{"":280},"iTotalDisplayRecords":false,"Data":[[1,"TableUpdates","Id"],[2,"TableUpdates","TableName"],[3,"TableUpdates","UpdateDate"],[1,"ApprovedProjects","Id"],[2,"ApprovedProjects","Company"],[3,"ApprovedProjects","State"],[4,"ApprovedProjects","Project"],[5,"ApprovedProjects","SubProject"],[6,"ApprovedProjects","Division"],[7,"ApprovedProjects","PlantNum"],[8,"ApprovedProjects","Exchange"],[9,"ApprovedProjects","DeptNum"],[10,"ApprovedProjects","ClassOfPlant"],

There are a total of 280 rows for this table. Nothing shows except the 2 button collections and the table header. There is no data.

Why don't I get anything to show up?

How I Use Print Button to Call Another Page html with selected records

$
0
0

Sir Hi,
How r You i use Your DataTabel its Ow-sum Plugin just small issue i face. If you some time to plz guide me how i can do it.
I also new in JavaScript
How I Use Print Button to Call Another Page html with selected records

I am waiting your positive reply thanks
Sorry for Bad English

Saqib

child rown not working also on fiddle example


How can I submit my Selected Row's Data via Button click?

$
0
0

I'm using a function that lets me select multiple rows in my Table:

<script>
$(document).ready(function() {
    $('#example').DataTable( {
    "iDisplayLength": 30,
    "order": [[ 6, "desc" ]],
  } );
  
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
} );
</script>

In addition my table is inside a form-tag that also has a button included, which should submit the data of my selected rows on click.

<form role="form" action="" method="GET">
    <table id="example" class="display compact cell-border" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Testcase ID</th>
                <th>OrderNr</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Testcase ID</th>
                <th>OrderNr</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Some Text 123</td>
                <td>Some Text 456</td>
            </tr>
            <tr>
                <td>Some Text 678</td>
                <td>Some Text 951</td>
            </tr>
        </tbody>
    </table>
    <button type="submit" id="button" class="btn btn-default btn-success pull-right">Create</button>
</form>

How can I post the selected row's data when clicking the button?

Parent-Child Tables

$
0
0

I want to do the same thing as shown on the blog 2016-03-25 Parent/Child editing. Is there any place where I can see the complete code for the users.php file for this example?

when click button, show table using ajax

$
0
0

Hello.

I have some questions.

I want to receive some values and show datatable regarding that values.

user write value1 and value2 and then click search button.
and datatable will be shown.

$('#search').on('click', function() {
    var dt = $('#ct_table').DataTable({
        // basic
                destroy: true,
        processing: true,
        lengthChange: false,
        pageLength: 25,
        columns: [
            { data: 'cl' },
            { data: 'submitted_at' },
            { data: 'submitted_by' },
            { data: 'name' },
            { data: 'department' },
            { data: 'description' }
        ],
        
        // ajax
        ajax: {
            url: 'search.php',
            type: 'POST',
            data: {
                path: path,
                range: range,
                user: user
            }
        }
    });

    $('#ct_table tbody').on('click', 'td', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );

        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass( 'shown' );
        }
        else {
            row.child( row.data().description.replace(/(?:\r\n|\r|\n)/g, '<br />') ).show();
            tr.addClass( 'shown' );
        }
    });
});
  1. Is this good way for using ajax or not? If not, can you show recommended code in brief?

  2. I have a code for detailed row. but sometimes when I change value1 and value2 and then click search button,
    detailed row does not shown and error message is
    Uncaught TypeError: Cannot read property '_detailsShow' of undefined(…)
    I guess this is related with destroy option but I need help.

Thanks in advance.

After 8 days, not loading table

$
0
0

hello
I am using the fixedcolumns.html but After 8 days, not loading table

Nested Object Data

$
0
0

Can anyone help me with configuring datatables to handle a json packet in this format:

[
    {
        "tid": 1234,
        "name": "US Open",
        "starts": "2016-08-28",
        "ends": "2016-09-10",
        "club": "Corona Park",
        "city": "Flushing",
        "state": "NY",
        "country": "USA",
        "events": [
            {
                "eid": 1,
                "name": "Men's Open Singles",
                "results": [
                    ["F", "Wawrinka", "Djokovic", "67(7) 64 75 63"  ],
                    ["SF", "Wawrinka", "Nishikori", "46 75 64 62"],
                    ["SF", "Djokovic", "Monfils", "63 62 36 62"]
                ]
            },
            {
                "eid": 2,
                "name": "Women's Open Singles",
                "results": [
                    ["F", "Kerber", "Pliskova", "63 46 64"],
                    ["SF", "Kerber", "Wozniacki", "64 63"],
                    ["SF", "Pliskova", "Williams", "62 76(5)"]
                ]
            }
        ]
    },
    {
        "tid": 5679,
        "name": "Wimbledon",
        "starts": "2016-07-03",
        "ends": "2016-07-16",
        "club": "Wimbledon",
        "city": "London",
        "state": "",
        "country": "GBR",
        "events": [
            {
                "eid": 1,
                "name": "Men's Open Singles",
                "results": [
                    ["F", "Murray", "Raonic", "64 76(3) 76(2)"],
                    ["SF", "Murray", "Berdych", "63 63 63"],
                    ["SF", "Raonic", "Federer", "63 67(3) 46 75 63"]
                ]
            },
            {
                "eid": 2,
                "name": "Women's Open Singles",
                "results": [
                    ["F", "S. Williams", "Kerber", "75 63"],
                    ["SF", "S. Williams", "Vesnina", "62 60"],
                    ["SF", "Kerber", "V. Williams", "64 64"]
                ]
            }
        ]
    }
]

... or does it need to be flattened like this:

[
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 1, "Men's Open Singles", "F", "Wawrinka", "Djokovic", "67(7) 64 75 63"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 1, "Men's Open Singles", "SF", "Wawrinka", "Nishikori", "46 75 64 62"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 1, "Men's Open Singles", "SF", "Djokovic", "Monfils", "63 62 36 62"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 2, "Women's Open Singles", "F", "Kerber", "Pliskova", "63 46 64"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 2, "Women's Open Singles", "SF", "Kerber", "Wozniacki", "64 63"],
  [1234, "US Open", "2016-08-28", "2016-09-10", "Corona Park", "Flushing", "NY", "USA", 2, "Women's Open Singles", "SF", "Pliskova", "Williams", "62 76(5)"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 1, "Men's Open Singles", "F", "Murray", "Raonic", "64 76(3) 76(2)"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 1, "Men's Open Singles", "SF", "Murray", "Berdych", "63 63 63"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 1, "Men's Open Singles", "SF", "Raonic", "Federer", "63 67(3) 46 75 63"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 2, "Women's Open Singles", "F", "S. Williams", "Kerber", "75 63"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 2, "Women's Open Singles", "SF", "S. Williams", "Vesnina", "62 60"],
  [5679, "Wimbledon", "2016-07-03", "2016-07-16", "Wimbledon", "London", "", "GBR", 2, "Women's Open Singles", "SF", "Kerber", "V. Williams", "64 64"]
]

I am fine flattening the data, but if there are 255 results per event and a lot of events, repeating all the tournament and event information in every row can make the json packet a lot larger than necessary.

Thanks for any help.

Best,
Shannon

DataTables not working, I'm sure I've linked correctly

$
0
0

Hi all,

I've been trying to get the awesome DataTables to work with local files - It's worked perfectly so far with CDN links, but since downloading the files locally, it just isn't working. Below is the <head> of this example page:

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>View Student Information</title>

    <!-- CSS -->
    <link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="DataTables/datatables.min.css"/>

    <!-- Scripts -->
    <script type="text/javascript" src="DataTables/datatables.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

  </head>

And here is a screenshot of the page not initiating DataTables

Any help would be greatly appreciated!

JSON Ajax error when trying to load an empty table from database through MYSQLi query

$
0
0

Hi,

I'm importing data using AJAX and a MySQL queries.

Everything works fine if the table from the database has data. If not, when loading the page, it trows the default JSON error alert.

I'm not using "serverside" parameter.

How could I do to load an empty table from the database and to make datatable recognise it has no data and show the proper message?

Thanks


How to put ellipsis on text in cells?

$
0
0

Hey,
What I need is an ellipsis after 15 characters, or so. But on the onmousehover() event I need a tooltip with the original value of the cell. How I can accomplish this?
I need help with only the first part i.e. ellipsis.
I know thi squestion has been asked multiple times, but I couln't find the correct answer.
Thanks,
Yash

Event should not apply to whole row

$
0
0

I am applying click event for the table row.But it should apply only on some specific cells not all.

Datatable using server side got error on pagination and filtered row

$
0
0

Hi,
I'm working on datatables inside my website in asp.net. With a huge data, I'm using server side with post to call up list base on page. The data show up nicely inside the table but pagination(endless pagination) and total of row(NaN) not show correctly. Here is the dataSrc part that I send back to datatables to restructured the tables accordingly.

},
 "dataSrc": function (data) {
    var json = $.parseJSON(data.d);

    var myData = {};
    myData.draw = parseInt(json.draw);
    myData.recordsTotal = parseInt(json.recordsTotal);
    myData.recordsFiltered = parseInt(json.recordsFiltered);
    myData.data = json.searchData;

    return myData.data;
 }

In the image is the json data I pass back to dataSrc to structured the table list.
Based on the data, I expect the page will be either show only prev and next button or there is only 1 page, but right now there is endless of page display. The total of row will be 10 but I got NaN.

Can anyone help me. Here is the details if you want other code stackoverflow.com/questions/40544765/jquery-datatable-pagination-and-filter-not-display-correctly

Doesn't Work Datatable Responsive made by Korean

$
0
0

Hello, I'm Web designer live in Korea.
First of all, Thank you for reading. (I don't write english very well.. Sorry...)

I'd attached 2 images.
If Datatable 'TD' wrote by English, Responsive appears in two lines(Picture '1'),
but The Table wrote by Korean, it appears in one lines. and 'TD' was aligned vertical as you look.(Picture '2')
2 image has same web width!! Is Korean not supported?

When I wrote this JSP page, I have set 'EUC-KR' encoding type like this.
(<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>)

is this problem?
I don't know everything..
Please solve this problem..help me :(

radio filtering on radios

$
0
0

i have a table where one column is having both radios 'Yes' and 'No' together with either ones checked for each rows. How can I filter this column using a radio filter?

I am using fnFilter but not able to filter this kind of a situation. I am able to filter if the each rows were like either 'Yes' or 'No'.

I hope the question is clear.

Viewing all 35414 articles
Browse latest View live