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

Custom Setting Length Menu

$
0
0

I have a DataTable that's doing server side processing. I'm returning the total number of records to the grid, and want to use that to dynamically set the LengthMenu. I can calculate the array in the drawCallback property, but the LengthMenu property ignores that.

So, in this initialization:

    var pageSizeBuilder = [25, 50, 75];

    var table = $('#' + tableName).DataTable({
        "autoWidth": false,
        "processing": false,
        "serverSide": true,
        "stateSave": true,
        "renderer": "bootstrap",
        "ajax": {
            "url": "/" + TableOptions.Controller + "/" + Action + "/",
            "data": function (d) {
                d.includeDeleted = $('#chkFilterDeleted').is(':checked')
                if(TableOptions.Controller == "FacilityResourceData")
                {
                    d.ssc = $('#States option:selected').val(),
                    d.ft = $('#FacilityTypes option:selected').text()
                }
            },
            "type": "POST",
            "datatype": "json"
        },
        drawCallback: function (d) {
            pageSizeBuilder = [25, 50]
        },
        "columns": ColumnDefinitions,
        aLengthMenu: pageSizeBuilder
    });

the Page Length options are 25, 50 and 75, which is what I specified when the pageSizeBuilder array was initialized, not what was assigned in the drawCallback. How can I dynamically set up the options in the page length menu?


How to create HTML Table from Firebase

$
0
0

Hi! Can anyone help me how to create an HTML Table from Firebase?

How to filter based on checkbox?

$
0
0

I have a table based on datatables that is filled from a mysql database... I want to filter thorugh a button, only row selected that have a checkbox on first column

This is my example

https://jsfiddle.net/aj7e94h0/1/

I can filter sending a new request to mysql database but if possibile is better with a script request... How can do this?

instead of deleting the row i just want to delete the specific column data

$
0
0

hi Allan ,

in editor delete button functionality instead of deleting the entire row i just want to delete the specific column data.

thanks in advance.

Server Side data split

$
0
0

i have a Problem with server side scripting.

My script does a query on one column the json response looks like
{EVDEVICE: "DVD/CD-ROM-Laufwerke::IDE Bus::HP CDDVDW TS-L633R ATA DEVICE"}

I would like to split the data after the "::" in to three columns. How can i do that?

I'm using the Server Side HTTP Post example

requirejs & datatable

$
0
0

while I were using requirejs and dataTables to build a website, I got some problem.

I went to see the source code about datatables.

    if ( typeof define === 'function' && define.amd ) {
    // AMD
    define( ['jquery', 'datatables.net'], function ( $ ) {
        return factory( $, window, document );
    } );
}

where can I find the 'datatables.net' module?

I find all dirs but failed.

Could you show me the way?

thank you.

How do you display an image from varbinary format?

$
0
0

I have a column in my DataTable that displays an image. All of the examples I can find use an img tag. But, my images aren't physical files on the server, they're stored as varbinary in SQL. How can I do this?

SQL server data

$
0
0

Hello everyone,
I accidentally deleted my SQL server data and now no idea how to recover it back. Maybe someone knows good program which fix Sql server or something else.
Thanks


Using superheaders breaks resizing

$
0
0

I have a table that uses two rows of headers:
| Person | // colspan = 2
| First Name | Last Name |
| Bob | Smart |

Because number of columns and headers is now different, datatables handles column widths explicitly. And table doesn't respond to browser window resizing any longer.

However adding style="width:100%" on the table cures this.

Am I doing something wrong? Is this expected behavior?

version DataTables 1.10.7

The "resize watching" mechanism is enabled if tableWidthAttr variable is truthy, tableWidthAttr is computed as follows:

        var tableWidthAttr = table.getAttribute('width'), // from DOM element
        var styleWidth = table.style.width;
        if (styleWidth && styleWidth.indexOf('%') !== -1) {
            tableWidthAttr = styleWidth;
        }

Which looks for in-line style and width attribute only, but does not consider width set through CSS, so even if CSS has width: 100% I still need to repeat that in width attribute or inline style.

--roman

Standalone error

$
0
0

He Guys,

I'm trying to create a stand alone form. I've managed to load the form and submit the value. It actually changes in the database but after submitting the value in the textbox changes to to following, and it no longer works:

<div class="DTE DTE_Inline">
   <div class="DTE_Inline_Field">
      <div class="DTE_Field DTE_Field_Type_text DTE_Field_Name_projects.title">
         <label data-dte-e="label" class="DTE_Label" for="DTE_Field_projects.title">
            <div data-dte-e="msg-label" class="DTE_Label_Info"></div>
         </label>
         <div data-dte-e="input" class="DTE_Field_Input">
            <div data-dte-e="input-control" class="DTE_Field_InputControl" style="display: block;"><input id="DTE_Field_projects-title" type="text" data-com.agilebits.onepassword.user-edited="yes"></div>
            <div data-dte-e="multi-value" class="multi-value" style="display: none;">Multiple values<span data-dte-e="multi-info" class="multi-info" style="display: none;">The selected items contain different values for this input. To edit and set all items for this input to the same value, click or tap here, otherwise they will retain their individual values.</span></div>
            <div data-dte-e="msg-multi" class="multi-restore" style="display: none;">Undo changes</div>
            <div data-dte-e="msg-error" class="DTE_Field_Error" style="display: none;"></div>
            <div data-dte-e="msg-message" class="DTE_Field_Message" style="display: none;"></div>
            <div data-dte-e="msg-info" class="DTE_Field_Info"></div>
         </div>
      </div>
   </div>
   <div class="DTE_Inline_Buttons">
      <div data-dte-e="form_buttons" class="DTE_Form_Buttons"><button class="btn" tabindex="0">Update</button></div>
   </div>
</div>

I can't figure out what this means. Here's the js i'm using:

(function($){
var editor;
$(document).ready(function() {

    // editor
    editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.projects.php',
        fields: [
            { "name": "projects.title" },
            { "name": "projects.product" },
        ]
    });

    // initial data
    $.ajax( {
        url: 'php/edit.projects.php',
        dataType: 'json',
        type: "post",
        data : { id : 456 },
        success: function ( json ) {
            $( ".product" ).text( json.data[0].product );
            $( ".title" ).text( json.data[0].title );
        }
    } );

    // open editor on click
    $('[data-editor-field]').on( 'click', function (e) {
        editor.inline( this, { buttons: '_basic' });
        });
    });
}(jQuery));

and the html:

<body class="dataTables">
    <div class="container" data-editor-id="456">
        <table>
            <tr>
                <td>product</td>
                <td><div class="product" data-editor-field="projects.product">-</div></td>
            </tr>
            <tr>
                <td>title</td>
                <td><div class="title" data-editor-field="projects.title">-</div></td>
            </tr>
        </table>
    </div>
</body>

and the serverside php:

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'projects', 'id' )
    ->fields(
        Field::inst( 'product' ),
        Field::inst( 'title' )
    )
    ->where( 'id', $_POST['id'],'=')
    ->process( $_POST )
    ->json();

Any help would be very much appreciated!!

thanks! wouter

Adding text AND button in column

$
0
0

I am trying to add a text AND button to a column. I can do one or the other, but can't seem to do both.

Doing something like this allows to add a button:

{"data": null,
"orderable": false,
"defaultContent": '<button title="Edit" id="boundEdit" class="Edit fa fa-pencil edit-icon"></button>',
"bSearchable": false}

But if I add a data value (such as "data": 'bookAuthor',), the button will only appear if the data value is null or blank. Is there a way to get BOTH to appear?

Problem fixed column with scroll

$
0
0

My JS is like this

var table = $('#example').DataTable(
{
"bAutoWidth": false,
"bAutoHeight": true,
"scrollX": true,
"scrollY": "550px",
"scrollCollapse":false,
"stateSave": true,
"paging": false,
"responsive": false,
"aoColumns": [
{ "bVisible": true, "bSortable": false, "aTargets": [0] },
{ "bVisible": true, "aTargets": [1] },
{ "bVisible": true, "aTargets": [2] },
{ "bVisible": true, "aTargets": [3] },
{ "bVisible": true, "aTargets": [4] },
{ "bVisible": true, "aTargets": [5] },
{ "bVisible": true, "aTargets": [6] },
{ "bVisible": true, "aTargets": [7] },
{ "bVisible": true, "aTargets": [8] },
{ "bVisible": true, "aTargets": [9] },
{ "bVisible": true, "aTargets": [10] },
{ "bVisible": true, "aTargets": [11] },
{ "bVisible": true, "aTargets": [12] },
{ "bVisible": true, "aTargets": [13] },
{ "bVisible": true, "aTargets": [14] },
{ "bVisible": true, "aTargets": [15] },
{ "bVisible": true, "aTargets": [16] },
{ "bVisible": true, "aTargets": [17] },
{ "bVisible": true, "aTargets": [18] },
{ "bVisible": true, "aTargets": [19] },
{ "bVisible": true, "bSortable": false, "aTargets": [20] },
{ "bVisible": true, "aTargets": [21] },
{ "bVisible": false, "aTargets": [22] },
{ "bVisible": false, "aTargets": [23] },
{ "bVisible": false, "aTargets": [24] },
{ "bVisible": false, "aTargets": [25] },
{ "bVisible": false, "aTargets": [26] },
{ "bVisible": false, "aTargets": [27] },
{ "bVisible": false, "aTargets": [28] },
{ "bVisible": false, "aTargets": [29] },
{ "bVisible": false, "aTargets": [30] },
{ "bVisible": false, "aTargets": [31] },
{ "bVisible": true, "bSortable": false, "aTargets": [32] }
],
'bDestroy': true,
"bInfo": false,
"bProcessing": true,
"bDeferRender": true,
'iDisplayLength': 15,
'sPaginationType': 'full_numbers',
"dom": "<'row'<'col-sm-9'B><'col-sm-3'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",
'sPageButtonActive': "paginate_active",
'sPageButtonStaticDisabled': "paginate_button",
"oLanguage": {
"sSearch": "Futher Filter Search results:",
"sInfo": "Got a total of TOTAL results to show (START to END)",
"sLengthMenu": 'Show <select>' +
'<option value="5">5</option>' +
'<option value="10">10</option>' +
'<option value="15">15</option>' +
'<option value="20">20</option>' +
'<option value="25">25</option>' +
'</select> results'
}
}
);

Merging two objects of Ajax response into one column

$
0
0

Hi,
I need to merge information from two lists received in ajax response and display their data in one column. this link(https://datatables.net/examples/basic_init/hidden_columns.html) explains how to hide columns. But I need to get data of hidden column and append it to another column, How do I do that. below is my code. column 3 is hidden but column 4 does not contain data from list1.


$j('#mydataTable').DataTable({ "processing": true, "serverSide": true, "ajax": "datasource.json", "columns": [ {"data": "name"}, {"data": "office"}, {"data": "phone"}, {"data": "list1"}, {"data": "list2"} ], columnDefs: [ { targets: [ 3,4], "orderable": false, render: function ( data, type, row ) { console.log("data : "+data); return data; } }, { targets: [3], "orderable": false, "visible": false, "searchable": false } ] });

Buttons ColVis - columns selector is not working with columns defined via JS-Object

$
0
0

Hello everybody,
today I tried to change from the old ColVis extension to Buttons. I came across with two problems. Perhaps these are Bugs, but maybe I'm doing something wrong.

First I found a problem with newer jQuery versions. The function call .andSelf() used in the dataTables.buttons.js script throws an error while trying to close the ColVis popup (jquery > 3.0.0).
To solve the problem you just have to replace the call with .addBack().

https://jsfiddle.net/friek2k/uy37fv6o/

Second I tried to use the columns property of the ColVis button with a CSS selector to show just a few columns at the list (to show/hide).
This worked perfectly when the columns are defined via HTML.
https://jsfiddle.net/friek2k/fjwjfuxL/

But when I define the same columns with exactly the same CSS classes as JS object, the CSS selector does not work.
https://jsfiddle.net/friek2k/4f98b6sv/

Thanks for the support!

Apply jquery on tr

$
0
0

I try this .

<script type="text/javascript">
      $(document).ready(function () {
          var table = $('#example').DataTable();

          $('#grid tbody').on('click', 'tr', function () {
              $(this).toggleClass('selected');
          });

          $('#button').click(function () {
              alert(table.rows('.selected').data().length + ' row(s) selected');
          });
      });
</script>
<table id="grid" class="display">
   <tr>
   <th>
   Name
   </th>
   <th>
   ID
   </th>
   </tr>
   <tbody>
   <tr>
  <td>
  ABC
  </td>
   <td>
   def
   </td>
   </tr>
   </tbody>
   </table>

also i add links

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

but table not display like this
-https://datatables.net/examples/api/select_row.html

any help


Can i use datattable for angularjs application or should i use angular-datattable?

$
0
0

Could you please suggest me which is the best for creating datatable in angularjs application ?

Thanks in advance.

No excel button

$
0
0

Hello!

DataTables is great, I love to use it.
The only thing left to use in my site is the Export to Excel button.

I try to use it, I think I set it up well - but no button shows up.

I've uploaded my code to a free site (sometimes its time to load in, sometimes its fast):
http://85.255.0.161/datatable_excel_test.php

Can you please help me what do I do wrong? I bet its a simple mistake what I don't see...

LuiKang

DataTable edit inside an Editor modal possible?

$
0
0

Is it possible to include a datatable inside on editor modal? And also have that datatable allow inline editing? My use case for this is I have a table of records, and each record has a field which satisfies a one to many relationship. This field can then be represented by another table which I would like to be able to edit, but do so within the modal editor which is being used for the remainder of the fields of the current row/record. I hope that makes sense.

resize and refresh width and height table

$
0
0

Do exist a method "refresh" without to lose every sort after I change width and height of the table?
Now I use an event resize in order to rebuild the table, but so I lose every order ...
thanks

Error adding new record

$
0
0

Hi
I keep getting a tn\12 error when I try to add a new record. This just started happening when I moved the site to a server from local. The description on the site doesn't really help because when I look at the AJAX response, I see the two fields I was posting with data. What else could be causing this issue?

Thanks!

Viewing all 82238 articles
Browse latest View live