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

Lightbox won't work

$
0
0

I may be doing this wrong, but for the editor when adding a new row, I want to use the lightbox like in the examples.

Here is the beginning of the javascript code I have

$(document).ready(function() {
    
    $.fn.dataTable.Editor.display.lightbox.conf.windowPadding = 50;
    
    
    editor = new $.fn.dataTable.Editor( {

and I'm bringing in the editor script as follows:

<script type="text/javascript" language="javascript" src="../../sdk/Editor-PHP-1.6.1/js/dataTables.editor.min.js">

When I click New in the editor for a new entry, I don't get a lightbox. Am I missing something obvious? Thanks


Indivudual column search not working with ScrollY

Issue with Searchpanes and ajax reload (when no pane already available)

$
0
0

Sometimes when reloading data with ajax, the searchpanes extension will crash and no panes will be generated.

The issue happens in the _updateCommon function when computing the scrollTop in specific scenario defined below:
1. Load a table with searchpanes and ajax data source.
2. Reload table with ajax where the resulting data would have a threshold lower than the option set in searchPanes (resulting in no pane being drawn). This could also be the case if there is no data returned at all I guess (hence generating an empty table).
3. Then reload the table with a data set that would cause searchpanes to be drawn
4. ==> There in the updateCommon function, it will crash as $(this.s.dtPane.table().node()).parent()[0] is undefined, so calling .scrolltop on it results in a crash.

I would like to provide a repro, but there is no different data sets for ajax sourced data on live.datatables.net... If required I will try to make something up but I think the problem description is pretty clear. Ping me if there's anything I can do to help!

Again, thanks in advance for your great work on this extension!

how to search and match exact keyword of only the certain column?

$
0
0

i am new to datatable and overall programming.(so sorry if my question didnt meet forum rules). in our work database there is a column named "status" , which may be one of these values : 'ACTIVE' , 'INACTIVE', 'IDLE', 'NULL'. (note: there is this criteria , where values other than 'ACTIVE' , is shown as "NOT DEPLOYED") every other search is fine , but in this particular column -"status" when we try to search for ACTIVE it also shows the rows which contain "INACTIVE because it contains the word ACTIVE within it. how to overcome this issue? also , when searching for "NOT DEPLOYED" ( which was changed on the frontend as said earlier) it wont show any relevent results that includes "NOT DEPLOYED".

Headers not aligned in Datatable

$
0
0

When I render my table with the JQuery command, if the table is less wide than my screen, the headers appear left aligned, while the table is centered. Below is most of the html file (it is a thymeleaf template)

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <!--JQuery install-->
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.4.1.js"></script>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">

<!--    <link href="/css/navbar.css" rel="stylesheet">-->

    <!--Data tables doc: https://datatables.net/manual/index -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

    <script>
        $(document).on('click', function(event) {
            ...

                    $("#main").DataTable({
                        scrollY: 400,
                        scrollX: 400,
                        "ordering": false,
                        paging: false
                    });
               });

            }
        });
    </script>

    <meta charset="UTF-8">
    <title>Home</title>
</head>

<body>
<div id="resultWrapper">
    <span id="resultTable">
        <th:block th:if="${table} != null and ${tableHead} != null">
            <table id="main" class="display cell-border">
                <thead>
                    <tr>
                        <th:block th:each="columnHeader: ${tableHead}">
                            <td th:text="${columnHeader}"></td>
                        </th:block>
                    </tr>
                </thead>
                <tbody>
                    <th:block th:each="row : ${table}">
                        <tr>
                            <th:block th:each="column : ${row}">
                                <td th:text="${column}"></td>
                            </th:block>
                        </tr>
                    </th:block>
                </tbody>
            </table>
            <div class="complete">
            </div>
        </th:block>
    </span>
</div>
</body>
</html>

This renders fine if I change the initializer to not have the scrollX value, but I do want it to fit on the screen.

Clickable truncate JS

$
0
0

For whom it may interest
If you are having the same issue as me with a lot of data for a column, that you need to check some times, but not want to show at all times, this code might help you. Truncate is here clickable - on/off.

$(".truncate").on("click", function() {
                var index = $(this).index() + 1;
                $('table tr td:nth-child(' + index  + ')').toggleClass("truncate");
            });

code for CSS:

.truncate {
    max-width:80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    }

Best regards
Claus

How would I call both the edit and create from a single button?

$
0
0

I'm trying to edit (soft delete) a row, and also create a new row (both makes ajax calls) from a single button.

var buttons = [ {
    label: 'Delete And Create'
    editor: editor,
    fn: function() {
        editor.field('Deleted').set(true);
        editor.submit();
        editor.field('Deleted').set(false);
        editor.create().submit(); //This isn't working, I think the form is being cleared
    }
}];

editor.edit( indexes, { buttons: buttons });

How would I be able to get a button that first edits a row, set the deleted field to true, and then, create a new row with deleted field to false?

Non-jQuery version of DataTables. Is this gonna happen?

$
0
0

Is there any initiative to have DataTables operate without jQuery as a dependency?


enable/disable custom buttons just like Edit/New/Delete

$
0
0

I have Editor. I've created two custom buttons...

I can .enable() the buttons on row click .on('click', 'tr', function (). I also have the capability to do this with the select event .on( 'select', function ( e, dt, type, indexes )

What I can't figure out is how to handle what happens when there is no selection, specifically after Editor finishes processing a Create, Edit, or Remove action. Like, after a DELETE, there is no selection, yet my custom buttons are still enabled.

How do I get my custom buttons to be toggled in the same way as the built-in Edit & Delete buttons?

One possible caveat is that I don't allow deselects: toggleable: false

How to use the data table finder to select which columns of the table I want to filter?

$
0
0

How can I limit the columns where the search engine will search?

Bug report: Issue with RowGroup integrated with Responsive and custom renderer

$
0
0

The issue has been reproduced here

To see it, simply run the js, then play with the output size to cause responsive plugin to recompute the columns and redraw.
The columns in the rowGroups that were initially fine, will become too long for the table as each td element will have the full table width set.

The source of the problem seems to come from dataTables.rowGroup.js#L186 where each td under the group row will be given a colspan equal to this._colspan(), which corresponds to the full table width.

New Discussion has just been deleted?

$
0
0

Background

I posted a new question/discussion and then attempted to edit it quickly (edit/save 3 times in a couple minutes). On the final attempt, which was a code-reformat with about 12 minutes left of edit-time, it wasn't save. Now it's completely gone and I can't edit it further. I don't recall the exact title, but it was along the lines of "Export CSV (include render column text)"

Question

Is this a potential or known bug on the site?


Post Script

Potentially noteworthy, my profile includes a "My Drafts" links with a number one (1) next to it. Upon clicking the link it says I have no drafts.

Submit json when checkbox selected

$
0
0

Hi all,
I'm using a setup similar to this https://editor.datatables.net/examples/api/checkbox.html
Where you select a checkbox, however instead of posting with the POST array data,
I wanted to modify $('#example').on('change', 'input.editor-active', function ( ) { }
So it submits json via XMLHttpRequest() the only issue i'm having is getting the related data
anyone know how to get the correct row index/data?

Fixed Header disappears when scrolling page

$
0
0

I have an odd behavior that I'm having trouble finding an answer for. I have a datatable and have set the fixedHeader option to true. When i start scrolling, the header is fixed at the top of the viewport and the table data extends down, allowing me to scroll via the browser window (i do not have the scrollY option set). However, when i get roughly two-thirds of the way scrolling through my page, the fixed header inexplicably no longer becomes fixed and scrolls out of view. When this happens, i can see a css class on the table change from fixedHeader-floating with a top of 0 to fixedHeader-locked with a top of 2316. I am, thus far, stumped on why this is happening. Any input is appreciated.

Uncaught Reference Error - Exception is not defined at FileReader.reader.

$
0
0

I get the error Uncaught Reference Error - Exception is not defined at FileReader.reader.<computed> while uploading a file in the inline editor.

1) On upload of file:

2) Error in file:

Code is as follows:

<head>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

  <link rel="stylesheet" type="text/css" href="DataTables-1.10.20/css/jquery.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="Editor-1.9.2/css/editor.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="AutoFill-2.3.4/css/autoFill.dataTables.min.css"/>
  <link rel="stylesheet" type="text/css" href="Buttons-1.6.1/css/buttons.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="ColReorder-1.5.2/css/colReorder.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="FixedColumns-3.3.0/css/fixedColumns.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="FixedHeader-3.1.6/css/fixedHeader.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="KeyTable-2.5.1/css/keyTable.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="Responsive-2.2.3/css/responsive.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="RowGroup-1.1.1/css/rowGroup.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="RowReorder-1.2.6/css/rowReorder.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="Scroller-2.0.1/css/scroller.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="SearchPanes-1.0.1/css/searchPanes.dataTables.css"/>
  <link rel="stylesheet" type="text/css" href="Select-1.3.1/css/select.dataTables.css"/>

  <script type="text/javascript" src="JSZip-2.5.0/jszip.js"></script>
  <script type="text/javascript" src="pdfmake-0.1.36/pdfmake.js"></script>
  <script type="text/javascript" src="pdfmake-0.1.36/vfs_fonts.js"></script>
  <script type="text/javascript" src="DataTables-1.10.20/js/jquery.dataTables.js"></script>
  <script type="text/javascript" src="Editor-1.9.2/js/dataTables.editor.js"></script>
  <script type="text/javascript" src="AutoFill-2.3.4/js/dataTables.autoFill.js"></script>
  <script type="text/javascript" src="Buttons-1.6.1/js/dataTables.buttons.js"></script>
  <script type="text/javascript" src="Buttons-1.6.1/js/buttons.colVis.js"></script>
  <script type="text/javascript" src="Buttons-1.6.1/js/buttons.flash.js"></script>
  <script type="text/javascript" src="Buttons-1.6.1/js/buttons.html5.js"></script>
  <script type="text/javascript" src="Buttons-1.6.1/js/buttons.print.js"></script>
  <script type="text/javascript" src="ColReorder-1.5.2/js/dataTables.colReorder.js"></script>
  <script type="text/javascript" src="FixedColumns-3.3.0/js/dataTables.fixedColumns.js"></script>
  <script type="text/javascript" src="FixedHeader-3.1.6/js/dataTables.fixedHeader.js"></script>
  <script type="text/javascript" src="KeyTable-2.5.1/js/dataTables.keyTable.js"></script>
  <script type="text/javascript" src="Responsive-2.2.3/js/dataTables.responsive.js"></script>
  <script type="text/javascript" src="RowGroup-1.1.1/js/dataTables.rowGroup.js"></script>
  <script type="text/javascript" src="RowReorder-1.2.6/js/dataTables.rowReorder.js"></script>
  <script type="text/javascript" src="Scroller-2.0.1/js/dataTables.scroller.js"></script>
  <script type="text/javascript" src="SearchPanes-1.0.1/js/dataTables.searchPanes.js"></script>
  <script type="text/javascript" src="Select-1.3.1/js/dataTables.select.js"></script>

  <script>
    var editor;
    var lastEditedRowId=null;

    $(document).ready(function()
    {

      editor = new $.fn.dataTable.Editor(
      {
          table: "#table",
          fields: [ {
                  label: "Sr No:",
                  name: "serial_number"
              }, {
                  label: "Name",
                  name: "name"
              }, {
                label: "Start date:",
                name: "start_date",
                type: "datetime"
              },
              {
                label: "Image:",
                name: "image",
                type: "upload",
                display: function ( file_id )
                {
                    return '<img src="'+editor.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
          ]
      });

      $('#table').on( 'click', 'tbody td:not(:first-child)', function (e)
      {
        lastEditedRowId=this.closest("tr").id;
        editor.inline( this );
      });

      editor.on('close',function()
      {
        console.log(lastEditedRowId);
        console.log(editor.get());
        console.log(editor.files())
      });

      $( editor.field( 'image' ).input() ).on( 'upload.editor', function (e, val)
      {
        console.log( 'Image field has changed value', val );
      });

      $('#table').DataTable({
        dom: "Bfrtip",
        columns: [
            { data: "serial_number" },
            { data: "name" },
            { data: "start_date" },
            {
                data: "image",
                render: function ( file_id )
                {
                    return file_id ?'<img src="'+editor.file( 'files', file_id ).web_path+'"/>' : null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor },
            { extend: 'selectAll',className: 'btn-space'},
            'selectNone',
            {extend: 'collection',text: 'Export',buttons: ['copy','excel','csv','pdf']}
        ]
    } );

    });
  </script>

</<head>

<body>

  <table calss="table table-bordered" id="table">

    <thead>

      <tr>
        <th>Sr. No.</th>
        <th>Name</th>
        <th>Joining Date</th>
        <th>Image</th>
      </tr>

    </thead>

    <tbody>

      <tr id="row_1">
        <td>100</td>
        <td>ABC</td>
        <td>23-02-2019</td>
        <td></td>
      </tr>

      <tr id="row_2">
        <td>400</td>
        <td>XYZ</td>
        <td>22-11-2000</td>
        <td></td>
      </tr>

    </tbody>

  </table>


</body>

Button colvis + Bootstrap 3 + colReorder problem

$
0
0

Hello, I have noticed that when moving around one column using the colReorder plugin and reopening the column list button the list is not displayed as it should. This is only happening in Bootstrap 3, for Bootstrap 4 or for the default style this does not happen.

Example of the problem:

http://live.datatables.net/lirihode/1

Same code with the standard framework (works correctly):

http://live.datatables.net/kasojiwe/1

Also, besides this problem, in Bootstrap 3 the transition when opening the Colvis button is not seamless.

Thank you in advance,

Alvaro

Bug export to excel ?

$
0
0

Hello, I'm getting this bug can someone help me?

I have a table like that

but when I export it to excel it showing like this (no rowspan or colspan header and the value is not completed missing 000)

here's my export button code so far

extend:'excelHtml5',
            text:'<i class="fa fa-file-excel-o"></i>',
            extend'excelHtml5',
            customize: function (xlsx) {

                console.log(xlsx);
                var sheet = xlsx.xl.worksheets['sheet1.xml'];

                // style
                $('row c', sheet).attr( 's', '25' );
                $('row:first c', sheet).attr( 's', '42' );   

                var downrows = 6;
                var clRow = $('row', sheet);
                //update Row
                clRow.each(function () {
                    var attr = $(this).attr('r');
                    var ind = parseInt(attr);
                    ind = ind + downrows;
                    $(this).attr("r",ind);
                });
         
                // Update  row > c
                $('row c ', sheet).each(function () {
                    var attr = $(this).attr('r');
                    var pre = attr.substring(0, 1);
                    var ind = parseInt(attr.substring(1, attr.length));
                    ind = ind + downrows;
                    $(this).attr("r", pre + ind);
                });
         
                function Addrow(index,data) {
                    msg='<row r="'+index+'">'
                    for(i=0;i<data.length;i++){
                        var key=data[i].k;
                        var value=data[i].v;
                        msg += '<c t="inlineStr" r="' + key + index + '">';
                        msg += '<is>';
                        msg +=  '<t>'+value+'</t>';
                        msg+=  '</is>';
                        msg+='</c>';
                    }
                    msg += '</row>';
                    return msg;
                }
         

                var r1 = Addrow(1, [{ k: 'A', v: nama }, { k: 'B', v: 'Detail Iuran BPJS' }]);
                var r2 = Addrow(2, [{ k: 'A', v: 'Penggajian Bulan' }, { k: 'B', v: penggajian_bulan }]);
                var r3 = Addrow(3, [{ k: 'A', v: 'Tahun' }, { k: 'B', v: tahun }]);
                var r4 = Addrow(4, [{ k: 'A', v: 'Tanggal Generate' }, { k: 'B', v: tanggal_generate }]);
                var r5 = Addrow(5, [{ k: 'A', v: 'Di Generate Oleh' }, { k: 'B', v: digenerate_oleh }]);
                var r6 = Addrow(6, [{ k: 'A', v: '' }]);
                
                sheet.childNodes[0].childNodes[1].innerHTML = r1 + r2+ r3+ r4+ r5+ r6+ sheet.childNodes[0].childNodes[1].innerHTML;
            },
            titleAttr: 'Excel',

        },

SearchPane resize specific panes

$
0
0

I used this example to get the searchPanes to be on the left of the DataTables, stacking the panes. However, I've been unable to resize one pane without affecting the other one. Any guidance on this would be great.

datatable ajax data.length

$
0
0

In ajax of datatables, if 'data.length' is 1, we want to trigger an alert, or we want to run the datatable.

if (data.length == 1) {
alert("message");
} else {
datatables....
}

Is it possible?

request

$
0
0

hi dear

I use R program. and want apply DataTables on this, do u have source recommend to me for reading?

thanks so much

Viewing all 82194 articles
Browse latest View live


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