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

Bug Report: Editor 1.6.1 Validator Decimal

$
0
0

Hello,

I get following error since Update:

[02-Jan-2017 18:53:19 Europe/Berlin] PHP Notice:  Undefined index: decimal in app/libs/Editor/php/Editor/Validate.php on line 438
[02-Jan-2017 18:53:19 Europe/Berlin] PHP Notice:  Undefined index: decimal in app/libs/Editor/php/Editor/Validate.php on line 473
[02-Jan-2017 18:53:19 Europe/Berlin] PHP Notice:  Undefined index: decimal in app/libs/Editor/php/Editor/Validate.php on line 474

Thanks!

Cheers
Hannes


How to switch editing on/off for rows programattically

$
0
0

I have a datatable on a page and, after I switch a checkbox on/off, I would like to make all rows not editable EXCEPT for the first row. I will then replicate the values on the first row to all the others (this part works).

What I've been attempting to do is switching the class responsible for making the columns editable on some of the rows, but it doesn't work for some reason.

On my fields declaration I have:

{ data: 'id' },
{ data: 'blocked' },
{ data: 'store' },
{ data: 'quantity',
    className: 'edit' },
{ data: 'price' ,
    className: 'edit'},
{ data: 'description' ,
    className: 'edit'},
{ data: 'reference' }

I am using KeyTable, therefore, I have the following declaration also:

keys: {
    columns: '.edit',
    editor: editor
}

This makes only the cells with the class .edit as editable. This works fine. This is what I'm attempting to do to make some cells uneditable:

 $("#changeAll").on("click", function(e) {
    // This bit does its work correctly. It assigns the class to the correct elements.
    if($("#changeAll").is(":checked")) {
        $('#theTable tbody tr:not(:first-child) td.edit').addClass('notEdit').removeClass('edit');
    } else {
        $('#theTable tbody tr:not(:first-child) td.notEdit').addClass('edit').removeClass('notEdit');
    }
});

So the classes switch correctly, but the datatable seems to break. When trying to alter any given cell, it is no longer editable (even the ones that SHOULD be and do have the correct class assigned to them). Also, keys navivigation seems unaltered. The following exception is thrown to the browser following any edit attempt:

Uncaught TypeError: Cannot read property 'index' of undefined
    at l._editor (dataTables.keyTable.min.js:9)
    at HTMLTableElement.<anonymous> (dataTables.keyTable.min.js:8)
    at HTMLTableElement.dispatch (jquery-1.11.3.js:4670)
    at HTMLTableElement.elemData.handle (jquery-1.11.3.js:4338)
    at Object.trigger (jquery-1.11.3.js:4579)
    at jQuery.fn.init.triggerHandler (jquery-1.11.3.js:5295)
    at _Api.<anonymous> (dataTables.keyTable.min.js:10)
    at _Api.iterator (jquery.dataTables.js:6926)
    at l._emitEvent (dataTables.keyTable.min.js:10)
    at l._key (dataTables.keyTable.min.js:13)

I am at my wit's end. Any help would be appreciated, even if it means rewriting the whole thing.

Prevent AJAX Reload After Inline Edit

$
0
0

Is it possible to stop the table from redrawing after an Inline edit is submitted?

I have a datatable works standalone but not in IFrame

$
0
0

I have a tale that works fine in a standalone html file. I want to have a scrolling list of links to the left that will load the table with data relative to the selected link (I want it to work something like the W3Schools site). To do this I created a page with two Iframes: One for the list the other with my datatable. The problem is that the datatable stopped working when I loaded it to the Iframe. What am I missing?

Below is my code:

Main page (index):
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<title>Failed Fax Monitor></title>
</head>
<body>
<iframe id="weeks" src="WeekList.html"></iframe>
<iframe id="requests" src = "Requests.html" name="Requests" ></iframe>
</body>
</html>
.

List frame (weeks)
<html>
<head>

     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <meta http-equiv="X-UA-Compatible" content="IE=11">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>
     <link rel="stylesheet" type="text/css" href = "css/Custom.css" />
    <script src="jQuery/datatables.min.js"></script>

     <script>
        $(document).ready(function() {
        }
    </script>
</head>
<body>
    <!--- hard-coded for now will eventually be populated dynamically -->
    <ul>
        <a href="php/Data.php?Date=20170123">01/23/2017</a>
        <a href="php/Data.php?Date=20170116">01/16/2017</a>
        <a href="php/Data.php?Date=20170109">01/09/2017</a>
        <a href="php/Data.php?Date=20160102">01/02/2017</a>
        <a href="php/Data.php?Date=20161226">12/26/2016</a>
        <a href="php/Data.php?Date=20161219">12/19/2016</a>
        <a href="php/Data.php?Date=20161212">12/12/2016</a>
        <a href="php/Data.php?Date=20161205">12/05/2016</a>
        <a href="php/Data.php?Date=20161128">11/28/2016</a>
        <a href="php/Data.php?Date=20161121">11/21/2016</a>
        <a href="php/Data.php?Date=20161114">11/14/2016</a>
        <a href="php/Data.php?Date=20161107">11/07/2016</a>

    </ul>
</body>

</html>

Frame with datatable (requests)
<html>
<head>
<link rel="stylesheet" type="text/css" href = "css/Custom.css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=11">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="jQuery/datatables.min.css"></link>

    <script src="jQuery/datatables.min.js"></script>

     <script>
        $(document).ready(function() {

             $('#faxList').dataTable( {
                 "pageLength" : 50,
                 fixedHeader: true,
                 paging: false,
                 //"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>',
                "ajax": {
                    "url": "php/data.php",
                    "dataType": "json",
                    "cache": false,
                    "contentType": "application/json; charset=utf-8",
                    "dataSrc": "transactions"
                },
                columns: [
                    { data: 'PROCESS_DATE' },
                    { data: 'PROCESS_STATUS' },
                    { data: 'PDF_FILE_NAME' },
                    { data: 'REF_ID' },
                    { data: 'ADDITIONAL_INFO' }

                ]
            });

        });
    </script>



</head>

<body>


    <h2>NCompass Failed Fax Monitor</h2>
    <br>
    <table width="100%" class="display" cellspacing="0" id="faxList">
        <thead>
            <tr>
                <th>Process Date</th>
                <th>Status</th>
                <th>PDF File</th>
                <th>Reference ID</th>
                <th>Error Description</th>
            </tr>
        </thead>

    </table>
</body>

</html>

How to set/save data for rows not being shown using server side processing (check all checkboxes)

$
0
0

Hello,

I have code that creates uses server-side processing and alters the data in order to create a checkbox for each row. Additionally, I have a check all and a uncheck all button. The problem is, since the content of pages not being shown does not exist in the DOM when using server-side processing, it can only select the boxes on the page. Also, when I go forward a page, then back again, it does not save the state of the checkbox (checked or unchecked).

My current idea that I have started is a workaround hack shown in the link below. It will keep track of which ones are checked and unchecked, and also keep track of whether all or none were last checked, which makes it visually work perfectly. However, if I want to log all checked ones to the console I still have no way of logging values that are not in the visible DOM. If it were possible to get all filtered values through the API this would be workable, however, I am still not sure that this is the best method.

Sending a custom AJAX request to the server_processing.php asking for all filtered values would be a way to get this information, but it would be preferable to just use the API.

http://live.datatables.net/qopupopu/2/

How would I go about achieving what I want to achieve?

apply parameters

$
0
0

i use data table with django and jquery .....

in my case i have the index.html and other file with my tbody...
when i insert one record in database i reload all records and return json , in this json i have my tbody with all my records
and others informations...
i render in my htm on page this way

$('#license_table tbody').html(data.table_license);

but the parameter than define not work i try the function .draw() but not work ? ,
can't apply initial parameter dynamically ?
the parameter just set if i reload the page...
if i use .draw , when update or delete record my table not updated if remove this function,
my table updated, but when is update i lost the parameter values initials

how i can just reload the setting of the datatable...
i'm a backend beginner , so sory if a little confuse...

my initial parameter:
var table = $('#license_table').DataTable({
"order": [[ 0, "desc" ]],
"pageLength": 5,
"lengthMenu": [3, 5, 10, 25, 50, 75, 100 ],
"language": {
"lengthMenu": " MENU registros por pagina",
"zeroRecords": "Nenhum registro encontrado, desculpe",
"info": "PAGE de PAGES",
"infoEmpty": "sem registros ",
"infoFiltered": "(filtro de MAX total )"
},
"language": {
"Search": "Pesquisar ",
"lengthMenu": "Mostrar MENU registro por paginas",
"zeroRecords": "não há registros",
"info": "Mosnrando registro PAGE de PAGES",
"infoEmpty": "Nenhum resuldado foi encontrado",
"infoFiltered": "(filtradno de MAX total de registros)",

         "paginate": {
            "next": "Próxima",
            "previous": "Anterior"
             }
        }
});

function i use my ajax....

var saveFormLicense = function(){
    var form = $(this);

    $.ajax({
        url:    form.attr('action'),
        type:   form.attr('method'),
        data:   form.serialize(),
        dataType: 'json',

        success: function(data){
            if(data.is_form_valid){

                $('#license_table tbody').html(data.table_license);
                $('#modal-license').modal('hide');


                $('#js-message').text(data.js_title_message)
                $('#js-serial').text(data.js_serial)
                $('#js-cliente').text(data.js_cliente)
                $('#modal-message').modal('show');

            }else{
                $('#modal-license .modal-content').html(data.form_html);
            }
        }

    });
    // return false because this method is trigger on submit.
    return false;
};

my json response

{
"table_license":
"\n\n<tr class=\"\" >\n <td id=\"19\">19</td>\n <td class=\"client_clicked
\">KAREKA TUTTI VIDEO</td>\n <td >78-E7-D1-AD-1E-96</td>\n <td >D1121L</td>\n <td

28/01/2017</td>\n\n <td ><button class=\"btn btn-warning js-license-update\" type=\"button\"
data-url=\"/licenses/update/19/\">\n <span class=\"glyphicon glyphicon-pencil\"> </span>\n
</button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete\" type=\"button
\" data-url=\"/licenses/delete/19/\">\n <span class=\"glyphicon glyphicon-trash\"> </span
\n </button></td>\n </tr>\n\n\n\n<tr class=\"\" >\n <td id=\"16\">16</td>\n
<td class=\"client_clicked\">RRC PREST. DE SERV. POSTAIS S/C LTDA.</td>\n <td >78-E7-D1-AD-1E-96
</td>\n <td >D1019A</td>\n <td >21/01/2017</td>\n\n <td ><button class=\"btn btn-warning
js-license-update\" type=\"button\" data-url=\"/licenses/update/16/\">\n <span class=\"glyphicon
glyphicon-pencil\"> </span>\n </button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete
\" type=\"button\" data-url=\"/licenses/delete/16/\">\n <span class=\"glyphicon glyphicon-trash
\"> </span>\n </button></td>\n </tr>\n\n\n\n<tr class=\"\" >\n <td id=\"18\">18</td
\n <td class=\"client_clicked\">KAREKA TUTTI VIDEO</td>\n <td >78-E7-D1-AD-1E-96</td>
\n <td >D1019C</td>\n <td >14/01/2017</td>\n\n <td ><button class=\"btn btn-warning
js-license-update\" type=\"button\" data-url=\"/licenses/update/18/\">\n <span class=\"glyphicon
glyphicon-pencil\"> </span>\n </button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete
\" type=\"button\" data-url=\"/licenses/delete/18/\">\n <span class=\"glyphicon glyphicon-trash
\"> </span>\n </button></td>\n </tr>\n\n\n\n<tr class=\"\" >\n <td id=\"20\">20</td
\n <td class=\"client_clicked\">IFACE LTDA</td>\n <td >78-E7-D1-AD-1E-96</td>\n
<td >DE726H</td>\n <td >14/01/2017</td>\n\n <td ><button class=\"btn btn-warning js-license-update
\" type=\"button\" data-url=\"/licenses/update/20/\">\n <span class=\"glyphicon glyphicon-pencil
\"> </span>\n </button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete
\" type=\"button\" data-url=\"/licenses/delete/20/\">\n <span class=\"glyphicon glyphicon-trash
\"> </span>\n </button></td>\n </tr>\n\n\n\n<tr class=\"\" >\n <td id=\"15\">15</td
\n <td class=\"client_clicked\">PENSAO PONTE DA BARCA LTDA.</td>\n <td >78-E7-D1-AD-1E-63
</td>\n <td >DE726A</td>\n <td >05/01/2017</td>\n\n <td ><button class=\"btn btn-warning
js-license-update\" type=\"button\" data-url=\"/licenses/update/15/\">\n <span class=\"glyphicon
glyphicon-pencil\"> </span>\n </button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete
\" type=\"button\" data-url=\"/licenses/delete/15/\">\n <span class=\"glyphicon glyphicon-trash
\"> </span>\n </button></td>\n </tr>\n\n\n\n<tr class=\"\" >\n <td id=\"21\">21</td
\n <td class=\"client_clicked\">MAURICIO MAIMONE FRANCISCO</td>\n <td >78-E7-D1-AD-1E-63
</td>\n <td >D1121O</td>\n <td >05/01/2017</td>\n\n <td ><button class=\"btn btn-warning
js-license-update\" type=\"button\" data-url=\"/licenses/update/21/\">\n <span class=\"glyphicon
glyphicon-pencil\"> </span>\n </button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete
\" type=\"button\" data-url=\"/licenses/delete/21/\">\n <span class=\"glyphicon glyphicon-trash
\"> </span>\n </button></td>\n </tr>\n\n\n\n<tr class=\"\" >\n <td id=\"14\">14</td
\n <td class=\"client_clicked\">SAO FRANCISCO COMER.DE INF.LTDA-ME.</td>\n <td >78-E7-D1-AD-1E-64
</td>\n <td >D1121B</td>\n <td >28/12/2016</td>\n\n <td ><button class=\"btn btn-warning
js-license-update\" type=\"button\" data-url=\"/licenses/update/14/\">\n <span class=\"glyphicon
glyphicon-pencil\"> </span>\n </button></td>\n\n <td ><button class=\"btn btn-danger js-license-delete
\" type=\"button\" data-url=\"/licenses/delete/14/\">\n <span class=\"glyphicon glyphicon-trash
\"> </span>\n </button></td>\n </tr>\n\n",
"js_cliente": "KEFAS COM. IMPOR. E EXPOR. LTDA",
"js_title_message": "Licen\u00e7a Deletada com sucesso!",
"is_form_valid": true,
"js_serial": "DE726B"
}

Is it possible to define specific width for each columns in datatable?

$
0
0

Hi Guys,

First of all I am newbie for this datatable. I am using .Net/c# with MVC 1 and Datatable legacy for my project. I have added datatable but I am having some issues. I am unable to define specific width for each columns. Below is my code, what am I missing here.

var branchId = '<%=ViewData["branchId"]%>';
$.ajax({
    url: '/Home.mvc/Home/GetDataDT',
    method: 'post',
    dataType: 'json',
    data: {
        branchId: branchId
    },
    success: function (data) {
        data.forEach(function (row) {
            row.push('<a id="iconEdit' + row[0] + '" name="EditData" href="<%=this.Url.Action("GetDataByID","Admin") %>?branchId=<%= Convert.ToInt32(this.ViewData["branchId"]) %>&Id=' + row[0] + '" title="Edit Data" class="actionButton" height="300px" width="610px"><span>Edit</span></a>')
        });

        $('#DataOp').dataTable({
            "bPaginate": true,
            "sPaginationType": "full_numbers",
            "bSearchable": true,
            "bAutoWidth": false,
            "iDisplayLength": 10,
            "bJQueryUI": true,
            "aaData": data,
            "aoColumns": [
                    { mData: 'Id', "bVisible": false, "bSearchable": false },
                    { mData: 'Name', "sWidth": "68px fixed" },
                    { mData: 'Details', "sWidth": "125px fixed" },
                    { mData: 'Functions', "sWidth": "20px fixed" }
            ]
        });
    }
});

will sWidth be used in aoColumns. If not how can I mention it.

Using datatable in salesforce lightning component

$
0
0

Hi,

I am using datatable in salesforce lighting component, its working fine expect I am getting this warning when lightning locker service is enabled.

WARNING: SecureElement: [object HTMLDivElement]{ key: {"namespace":"c"} } does not allow getting/setting the disabled attribute, ignoring!

Locker service in salesforce prevent:

Components from causing XSS and similar security issues
Components from reading other component’s rendered data without any restrictions
Components from calling undocumented/private APIs

I am afraid it might stop working some day.

Thanks,
Rehan


pdfHtml5 Orientation/Size

$
0
0

Hello, I am invoking the pdfHtml5 button options 'orientation' and 'pageSize' to produce a print in landscape and on legal paper.

        buttons: [
            {
                extend: 'pdfHtml5',
                orientation: 'landscape',
                pageSize: 'LEGAL'
            }
        ]

The resulting PDF does in fact appear in the proper orientation and pageSize. However, the report does not expand into the additional space provided. It is sized as it would be in portrait mode. The same effect is found in the example on this website: https://datatables.net/extensions/buttons/examples/html5/pdfPage.html

Is there a way to get the full page width used? Many thanks in advance.

.draw() - not working. What do I do wrong?

$
0
0

When the value in #table2 is modified in editor, #table1 needs to redraw as some values has change.
Therefore I have the code:

var editor = new $.fn.dataTable.Editor({
            ajax: 'php/page...[some_link].... .php,
            table: '#table2',
            fields: [
                {
                    "label": "something",
                    "name": "something"
                }
            ]
        }).on('submitComplete', function () {
            var my_table = $('#tabel1').DataTable();
     //       my_table.ajax.reload(); - also tried as I thought it requires to refresh with data from server
            my_table.draw();
        });

But no success. What do I do wrong?

How to Filter rows that have a checkbox ticked?

$
0
0

What I would like to do is filter all rows that have a checkbox ticked in the data table.

I have a custom button created but I seem to be having a problem being able to select the element to see if it is ticked or not.

Structure for a row looks like this:

<tr>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td>Some Data</td>
<td><span class="disabled"><input id="someId" name="somename" checked="checked"></span></td>
</tr>

This is the code I have running inside the function for my custom button:
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
console.log($(table.row().node()));
return $(table.row(dataIndex).node('#MainContent_EnquiriesMainContent_StaffGridView_ctl01_0[type=checkbox]'));
}
);
table.draw();

This obviously isn't working but I just can't work out how to inspect the element.

I realise that it should be something like: $(table.row(dataIndex).node().attr( ) ) but I just can't work it out.

The console log shows all the rows being returned so I am half way there!!

Thanks in advance

what does $('is t').text() mean in cell format example mean?

how to get .html() and .text() from datatable

$
0
0

hi all, i am using datatable to show record. i have a circle (icon) in first td of each row. i need to turn green this icon of status is 1. i am having problem with getting icon .html() and .text() out from datatable so that i can turn icon green if its corresponding number is matching with the status. currently only 1st icon is green which status is 0. which should not be green.
how i can get .html() and .text() from datatable tr td .if i can get .html() and .text() from datatable i will get it work.
here is my code https://fiddle.jshell.net/6faumn44/41/

Thanks,

Custom column search and Column Visibility

$
0
0

Hi! I tested all the codes I found on the website to create custom column filters like the interval filter, the text filter, the date filter, on so on, both using extra search methods added to $.fn.dataTable.ext.search or by using the column().search() method and everything is working great, even when many of them are used together, so that's really great, I love it. After adding the column visibility button from the Buttons extension, everything is still working great BUT as soon as one column is hidden by the extension, regardless of which column, none of the custom filters work anymore beside the default table search created by Datatable(). After checking in more details, the problem is not in the column indexes and the custom events I added to the filters (like keyup) are still present on the DOM elements but for whatever reason, they no longer work. The problem happens on any kind of custom filter and on any column, it looks like as soon as I hide a column using the column visibility button, the table cannot be filtered or redrawn using these custom filters. Any idea what could be the problem? The code I use is too long to be pasted here but the problem can be reproduced using the code here : https://datatables.net/examples/plug-ins/range_filtering.html adding only the colvis button at initialization time. Thank you

Datatables server side processing is slow

$
0
0

Hi, Server side processing for datatables are very slow, i think it's filtering all records for only 10 records pagination. How can i avoid server filtering all records?

[{DT_RowId: "row_206599", product_name: "camelbak",…},…]
draw:1
files:[]
options:[]
recordsFiltered:"342022"
recordsTotal:"342022"


Could any help me to resolve the alignment issue in datatable? Here is the code

$
0
0

<html>
<head>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

Date Description Service Type Value Code Invoice Number
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
10 JAN 2017 CANCELLED billing empty 1 12 12321312312
</body>
<script type="text/javascript">

$(document)
.ready(
function(){
$('#transactionOneOffTable').dataTable({
"sScrollY": "200px",
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bAutoWidth": false,
"iDisplayLength": 6,
"bInfo" : false});

            });

                $('#transactionOneOffTable').DataTable().draw();


                        </script>

</html>

Index column and deferRender

$
0
0

I have a table where I would like to add a column where the user could see row indexes, like in this example. The problem is that the table has quite a bit of rows and expected to be accessed from mobile so, as one would expect, I'd like to have it loading as fast as it's possible. One of ways to make it faster is to use deferRender option which really improves loading speed but it's not compatible with the code for index column because it generates IDs only for first page.

So, I was wondering if there is some other lightweight approach to add that column while keeping deferRender on. My guess would be to utilize column render mechanics but I can't find a way yet to access indexes of rendered rows from there.

change of layout on Bootstrap modal while adding custom button

buttons.info() modal box multiline message

$
0
0

any Idea how I might accomplish that? I want to have more control over the formatting
in the modal box. I tried sending string with \n in them but it didn't work.
I'll probably have to modify the API itself, I just need a direction.

Thanks

Order by

$
0
0

I am having trouble figuring out how to order by just numbers only.
I would like DataTables to ignore ordering by stock_code and only sort by stock_number is row stock_number
Any help is appreciated!

                "order": [[ 0, "desc" ]],
                "columns": [
                    {
        "data": "stock_number",
        render: function ( data, type, row ) {
        return row.stock_code+ +row.stock_number;
    }
},
                    { "data": "year" },
                    { "data": "make" },
                    { "data": "model" },
                    { "data": "date" },
                    { "data": "vin" },
                    { "data": "miles" },
                    { "data": "cost" },
                    { "data": "who" }
        ]
Viewing all 81384 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>