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

Issue with colReorder and colVis - Columns display in the wrong order

January 31, 2017, 2:03 am
$
0
0

Hi everyone!
I'm using Datatables 1.10.12 and I have a problem. My table needs to have the ability to change colmun order and to show/hide columns. So I use colReorder and colVis. colReorder works fine.
But when I hide a column and show it again, the header displays at the right place, but the column content displays in the last column of the table. So the whole content of my table moves one columns on the left...
I have been trying to solve this for hours but I can't find the solution!
Thanks a lot for your help!
Here is my code:

$(document).ready(function() {
    var table = $('#tableau').DataTable( {
        colReorder: true,
        paging:   false,
        ordering: true,
        info:     true,
        scrollY:  '50vh',
        scrollX:    true,
        bFilter:    true,
        stateSave:  true,
        select:     true,
        dom:    "B<'clear'>lfrtip",
        buttons:    [
            {
                extend: 'colvis',
                postfixButtons: [ 'colvisRestore' ]
            }
        ],
        language: {
               select: {
                rows: {
                    _: "%d lignes s&eacute;lectionn&eacute;es",
                    0: "",
                    1: "1 ligne s&eacute;lectionn&eacute;e"
                }
            },
            url: 'datatables/french.lang'
            },

    "stateSaveCallback": function (settings, data) {
     $.ajax( {
     "url": "ajax/dbManager.php?action=save",
     "data": {"name":"etat_parc.php", "state": data} ,//you can use the id of the datatable as key if it's unique
     "dataType": "json",
     "type": "POST",
     "success": function () {}
     });
    },

    "stateLoadCallback": function (settings) {
    var o;
    $.ajax( {
        "url": "ajax/dbManager.php?action=load",
        "data":{"name":"etat_parc.php"},
        "async": false,
        "dataType": "json",
        "type": "POST",
        "success": function (json) {
            o = json;
        }
    } );
    return o;
    }
    } );
↧
Search

Why this simple example does not work?

February 7, 2017, 1:40 am
$
0
0

Hello,

I'm not able to make this simple example works. The datatable below is using the server of datatables.net to load json data, but nothing is loaded. What I am doing wrong? Thank you in advance.

<!DOCTYPE html>
<html><head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">

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

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>PRUEBA</title>

    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>

    <script type="text/javascript" class="init">

$(document).ready(function() {
    $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "https://datatables.net/examples/server_side/scripts/server_processing.php"
    } );
} );

    </script>
</head>

<body>

    <table id="example" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

</body></html>
↧
↧

Checkbox ticks not persisting through page changes

February 7, 2017, 1:51 am
$
0
0

Hi. Firstly thanks for your work on this tool it's been very helpful.

I have an issue with my datatable where checked checkboxes are not keeping their 'checked' state when I switch between pages. I have read other posts on the forum which describe the same issue, and found that if serverSide is false that the boxes should remain ticked.

I'd appreciate it if someone could take a look at my code and make a suggestion as to how to fix it.

$(document).ready(function () {
    var userGroupData = @Html.Raw(Model.UserGroupJson);
    var table = $('#usergroupTarget').DataTable({
        "data": userGroupData,
        "columns": [
            {"title": "Usergroup Name"},
            {"title": "Target"}
        ],
        "serverSide": false,

        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            var tblTds = $('>td', nRow);
            tblTds[0].innerHTML = aData[1];

            $(nRow).attr("id", 'tblRow_' + aData[0]);
            tblTds[1].innerHTML = '<td><input type="checkbox" name="publishedstatus" value="' + aData[0] + '" id="' + aData[0] + '" onclick="Member(' + aData[0] + ')" /><label for="' + aData[0] + '"></label>></td>';
        }
    })
});

Cheers!

↧

Quill link button is not working

February 7, 2017, 1:52 am
$
0
0

Hi Allan,

I have implemented Quill now. Everything works fine except for the link button and the placeholder. The link button is there but it doesn't work. Once you select some text and click the link button you should be able to enter a link into a small field. Like here: https://quilljs.com/
But the small field does not appear in Editor. The placeholder is ignored.

I am using Quill 0.20.1. This is my code in Editor:

{
label: "Description:",
name:  "rfp.description",
type:  "quill",
toolbar: quillToolbar,
      opts: {
                    placeholder: 'Please enter your description',
                    theme: 'snow'
                }
}

How could I fix this? Additional opts?

↧

Uncaught TypeError: Cannot read property 'nTh' of undefined...

February 7, 2017, 1:57 am
$
0
0

I maintained the separate js file for specific action and view but if i put that datatable script code in application.js it will work .if i removed from application and maintained in seperate js file it will processing the data from the datatable getting the error uncaught in console

↧
↧

Date sorted as string - how can I make it sort correctly?

February 6, 2017, 8:16 am
$
0
0

Hello,

I apologize if this is a repeat but I was not able to find a solution in my search.

I am populating my datatable dynamically through an object. The html is static with an empty body. The date I am sending back from the server is in this format (string) and the format I need it to display in:

01/26/2017 07:00:12 AM // MM/DD/YYYY HH:MM:SS 12

Here is how I am loading the data into the datatable:

// For each row, add data dynamically to table
        $.each(transactionDetails, function(index, item) {
            table.row.add([
                        item.applicationName,
                        item.apiName,
                        item.transactionId,
                        item.reqTimeStamp, // This is the date string
        });

        // Redraw the table
        table.draw();

When I want to sort the date, its sorted in string format (from left to right) and this causes incorrect sorting.

How can I sort the date correctly while displaying it in the above format?

Thanks in advance.

Sanel

↧

yadcf - multi_select with select2 - options dropdown not case sensitive

February 7, 2017, 3:03 am
$
0
0

Will be posible, in yadcf multi_select filter, sort possible option with case insensibility?

Here is my fiddle to explain this.

In column STATUS are 4 possible values: "abs", "off", "OFF" and "ON". In dropdown the options appears in this order: "OFF", "ON", "abs", "off". And my desire is the options appears in this order: "abs", "OFF", "off", "ON".

Thanks in advance one more time.

↧

Reset auto increment after deleting a table row

February 7, 2017, 3:40 am
$
0
0

I have a MySQL table with an auto increment primary key. I deleted some rows in the middle of the table. Now I have, for example, something like this in the ID column: 12, 13, 14, 19, 20. I deleted the 15, 16, 17 and 18 rows.

I want to reassign / reset / reorder the primary key so that I have continuity, i.e. make the 19 a 15, the 20 a 16, and so on.

How can I do it?

↧
Search

Select/KeyTable alternative implementation

February 6, 2017, 8:09 am
$
0
0

I'm pondering whether it is possible to replace the Select and KeyTable plugins with a unified code model that takes advantage of sequential focus navigation (tabindex navigation).

Here is a quick demo: https://jsfiddle.net/sliekens/5wvhr7o8/

The demo has a tabindex attribute on things that I want to be able to select, and some styling to make focused rows and cells stand out.

Before I go on and spend too much time on this, has anyone tried to go down this road before?

↧
↧

Complex headers plus sign not in separate column (SOLVED)

February 5, 2017, 9:04 am
$
0
0

I am implementing the complex headers table using responsive plugin, but I get the following outcome:

The plus sign is in the name column, which is not desired, it should be in a new column before the name column.

Html is like in the example, but my js code is the following:

$('#tblComplexHeaders').DataTable({
    "sDom": "<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>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_"
    },
    responsive: {
        details: {
            type: 'column'
        }
    },
    columnDefs: [{
        className: 'control',
        orderable: false,
        targets: 0
    }],
    order: [1, 'asc']
});

The table looks good, only the plus sign is a problem.
I use the following plugins:

require(
[
    "jquery",
    "datatables.net",
    "datatables.net-bs",
    "datatables.net-responsive",
    "datatables.responsive.bootstrap",
    "datatables.responsive.helper",
    "datatables.net-buttons",
    "datatables-buttons.html5",
    "datatables.net-buttons-print",
    "datatables.net-buttons-colVis",
    "jszip", "pdfmake", "vfsfonts"
], function ($) {...

The function sets up different types of datatables, that's why I need the different plugins.
Any hint how to get the plus sign in a separate column before the "names" column?

The generated markup:

↧

bower datatables.net-bs missing 'images' directory

August 16, 2016, 7:21 am
$
0
0

I'm installing DataTables Bootstrap styling via Bower, and the /images directory that contains the sort images (sort_asc.png, etc.) is missing from the package.

A similar issue is here that was resolved for the Foundation styling:
https://datatables.net//forums/discussion/comment/85008/

If they are the same images for all stylings, perhaps they should be included in the 'datatables.net' package rather than in the styling packages.

↧

Datetime Plugin

January 17, 2017, 1:46 am
$
0
0

When I define my column like this

{ data: "ReviewDate", type: "date", render: $.fn.dataTable.render.moment("DD-MM-YYYY","YYYY-MM-DD","en")

I always get "invalid date" returned.

↧

table filters from imported excel data table

February 6, 2017, 1:12 pm
$
0
0

hi, i imported excel table with filters but filters dont work on the table once imported to the site. any suggestions please?
I am not a coder. thanks. kevin.

↧
↧

Issue while loading the data table

January 31, 2017, 12:42 pm
$
0
0

Hi,

Am new to .Net web application, datatables and editor. I went through the basic examples in the website. I am facing an issue. Hope someone can throw some light on this.

Please find below the code that i use and error message i get.

HTML:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="xxx.cs" Inherits="xxx" %>

<!DOCTYPE html>

<html>
<head runat="server">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- end required meta tags -->

<title>test</title>



<link href="../DataTables/Bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css" /><!-- Do not edit -->
<link href="../DataTables/Bootstrap-3.3.7/css/bootstrap-theme.css" rel="stylesheet" type="text/css" /><!-- Define theme changes here. -->
<link href="../DataTables/DataTables-1.10.13/css/dataTables.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../DataTables/Buttons-1.2.4/css/buttons.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../DataTables/Select-1.2.0/css/select.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../DataTables/Editor-1.6.1/css/editor.bootstrap.css" rel="stylesheet" type="text/css" />
<link href="../Styles/test.css" rel="stylesheet" type="text/css" />



<script src="../DataTables/datatables.min.js" type="text/javascript"></script>
<script src="../Scripts/test.js" type="text/javascript"></script>
<!-- End JavaScript Includes -->

</head>
<body>

test

col1 col2 col3 col4 col5

</body>

</html>

Javascript:

(function () {

var editor;


$(document).ready(function () {


    editor = new $.fn.dataTable.Editor({
        ajax: {
        url: "URL to DB service",
        contentType: "application/json; charset=utf-8",
        dataType: "json" },
        table: "#Grid-01",
        fields: [

        {
        "label": "col 1",
        "name": "col1"
    },
        {
            "label": "col 2",
            "name": "col2"
        },
        {
            "label": "col 3",
            "name": "col3"
        },
        {
            "label": "col 4",
            "name": "col4"
        },
        {
            "label": "col 5",
            "name": "col5"
        }

    ],
    formOptions: {
        inline: {
            onBlur: 'submit'             }
    }
});

var table = $('#Grid-01').DataTable({
    lengthChange: false,
    order: [],
    ajax: {
        url: "URL to DB service",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        type: "GET",
        dataSrc: "d"
    },
    columns: [

                    { "data": "col1" },
                    { "data": " col2" },
                    { "data": " col3" },
                    { "data": " col4" },
                    { "data": " col5" }
        ]
        });

// Display the buttons
new $.fn.dataTable.Buttons(table, [
        { extend: "create", editor: editor },
        { extend: "edit", editor: editor },
        { extend: "remove", editor: editor }
    ]);

//Add the buttons to the appropriate Bootstrap class
table.buttons().container()
        .appendTo($('.col-sm-6:eq(0)', table.table().container()));



$('#Grid-01').on('click', 'tbody td:not(:first-child)', function (e) {
    editor.inline(this);
});

});

} ());

Output of DB service:

{"d":"[{\"col1\":\"12345\",\"col2\":\"123\",\"col3\":\"123\",\"col4\":\"100\",\"col5\":\"test_1]"}

Error message :

Datables warning: table id = Grid-01 – Requested unknown parameter ‘col1’ for row 0, column 0.

Thanks!

↧

Date ranges as column headers?

February 6, 2017, 11:17 am
$
0
0

Is it possible (and how should I go about it)?
I have a table where the column headers are date ranges smilar to what is shown in the image attached (The image is from an older version).
I want to use arrows to load previous or later dateranges (so even the headers will change dynamically) and maybe add a date range filter. Also would it be possible to add a 'blank' column between the date ranges that are not continuous (there are dates between them that belong to neither date range)?

How should I go about this?

↧
Search

Responsive - Requires order: dt object to work?

February 6, 2017, 10:51 am
$
0
0

I am attempting to use the Responsive extension for DataTables, and I notice that until I added order: to the DataTables object, the responsive column wouldn't show properly (would ignore the orderable: object on columnDefs for the responsive control column).

See my example here: http://live.datatables.net/yajamuvo/1/edit?html,js,output

(Mind, for some reason the responsive controls is not working here either, despite having invoked it correctly from what I can tell, but you can remove the order: object, and the responsive column does not display correctly.)

This is a bit frustrating, since in some cases I want my query output (what populates my DataTable) to determine the default sort order. Not a deal-breaker, but if this is a bug and can be resolved, all the better.

On a side note, I notice the documentation for responsive makes mention of a no-wrap class to be added optionally to the table - this is not correct, as the correct class is actually nowrap (minus the hyphen).

↧

Data Table Editor Event

February 6, 2017, 7:20 am
$
0
0

Hi,
I am trying to check some condition before allow user to click "New" button

Editor.on('initCreate', function () {
  if (SelectStatus !== 'Y') {
    alert("Pleae Select !!!!!!");
      return false;
    }
  else
     return true;
});

I am getting alert but after alert it shows Lightbox for adding new record.
How to prevent show the lightbox dialog if condition not match ??

↧
↧

datatable export to excel give error excel found unreadable content in xxx.xlsx file

May 10, 2016, 2:59 am
$
0
0

Hi,
I added export to excel button in datatable. but sometimes after downloading excel it cant open it and gives error "excel found unreadable content in xxxx.xlsx. Do you want to recover content of this file". I cant find for which character it is giving this error.
How to resolve it.

Thanks.

↧

Date sorting with "Ultimate date/time sorting..." not working...

February 6, 2017, 10:52 am
$
0
0

I've gotten a link to show that the output isn't working with the reference to "moment" -

This "Column sorting Version 5" shows that the sorting on the columns work when the "$.fn.dataTable.moment('MMM-DD-YY') " is commented out, but this "Column sorting Version 4" isn't working with that same line uncommentted. I'm not for sure what I'm not doing correctly, but something isn't correct.

Note when you go to "Column Version 5" - the actual sorting on the dates are not correct - you'll see dates for 2016 mixed with 2017 down the list. The goal is to get this to sort on date in descending order.

Thanks, Michael

PS: If you need more information, please let me know what is missing and I'll see if I can get that info ASAP.

↧

First Column disappears when changing from responsive mode(+/-) to standard mode

February 6, 2017, 4:52 am
$
0
0

Here is a reproduction:
jsbin.com/dezuga/3/edit?html,js,output

When you resize the width of the output page, in responsive mode (when the expand/collapse signs appear) you can see the "name" column, if you enlarge the width of the page and the table switches into standard mode the "name" column is hidden.

Why is that?

↧
Viewing all 81384 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>