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

table.ajax.reload(): how do you JSON.parse?

0
0

I am trying to reload my table on the click of a button using table.ajax.reload().
I'm getting an invalid JSON error and upon going through troubleshooting with datatables/tn1, I can see that it is returning html/text instead of JSON.
How do I parse the data on reload?
I've tried various ways of combining table.ajax.reload() with JSON.parse(), but none have worked.

Thanks


Child row with button (which shows hidden content)

0
0

Hello, I have DataTable with button in row child. I have hidden content below the button and I need to display this hidden content after click on this button. I tried it on my own, but the best working version was, that the button in one row child also manages the content of all other childrows. :(

He re is my test case https://jsfiddle.net/nnb97rh9/1604/

Thank you

Can i change column name while exporting to CSV ?

0
0

My Code is soothing like

    buttons: [
    {
extend:  'csvHtml5',
text: 'Salesforce CSV ',
exportOptions: 
{
columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
}
},
    {
extend:  'csvHtml5',
text: ' Outlook CSV',
exportOptions: 
{
columns: [2,9,10,11,12,15,14,13,16,23,17,18,19,20,21,22,24]
}
},
   ],

I wanted to change Column 17, 18 , 19 name while exporting.

For both CSV files column names should be different

BUG Responsive class display none is kept when reordering

0
0

Hi,

I'm using responsive, colvis and colreorder with statesave
I'm having the following issue

See the jfiddle to reproduce
http://jsfiddle.net/lenamtl/v341qbyx/23/

I have a lot of columns some are hidden by responsive

Hide some column with colvis till you see one of the column which is hidden by the responsive
based on the jsfiddle example let hide all except Role and Register date
-the result is ok in table and in statesave value

Let move one column register date in front of Role
so now we have Role, Register date and Tool

Now let show all hidden columns using colvis
the result is ok in table and in statesave value
so now we have Role, register date ( all other columns) and tool

refresh the page
the result in table is NOT OK the colunm Register date is now Hidden (have display none class)
the result is ok in statesave value (the column is visisble in statesave)
So this mean this column keep the class display none class from responsive
but the column have change position so the column display none class should be removed and it is not

I need an urgent quick fix for this.
Thanks

Colvis/Column visibility with scroll bar?

0
0

I have a table with a complex header (huge amount of columns). I am using the colvis button to show a list of the columns in the table and to toggle column visibility. I would to add to that list a scroll bar. I know that you can add columns to the list but I would like to add a scroll bar to facilitate to search the desired column.

I would like something like that...

It would be possible?

Thank you in advanced.

column().name() - DataTables 2.0.0?

0
0

I found this API page on google for column().name(). It says "Since DataTables 2.0.0", but I can't find any other mention of DataTables 2.0.0 anywhere! Is this something that's in development, or...?

We want to Know logic of table row sorting in data table

0
0

We want to Know logic of table row sorting in data table

In our project data show correct but i want to highlight the latest record but i dont get i value in while loop . Its shows randomly value of i if we printed

Please give me proper guidance

Missing Method System.String[] System.String.Split(Char, System.StringSplitOptions)

0
0

Hi,
I'm trying to test a package created by generator and I have the error

Missing Method System.String[] System.String.Split(Char, System.StringSplitOptions)

This error has been already discussed here.
The error happens either with Nuget package and with downloaded trial and with .net 4.5 and 4.6 (editor version 1.8.1).
Looking at the stacktrace it seems depends on the Editor DLL :

[MissingMethodException: Impossibile trovare il metodo 'System.String[] System.String.Split(Char, System.StringSplitOptions)'.]
DataTables.DtRequest.HttpData(IEnumerable1 dataIn) +0 DataTables.DtRequest._Build(IEnumerable1 rawHttp) +107
DataTables.DtRequest..ctor(IEnumerable`1 rawHttp) +210
DataTables.Editor.Process(NameValueCollection data) +297
DataTables.Editor.Process(HttpRequest request) +127
EditorGenerator.api.OffersRows.Page_Load(Object sender, EventArgs e) in C:\Users\roby\Desktop\EditorGenerator\EditorGenerator\api\OffersRows.aspx.cs:18
System.Web.Util.CalliEventHandlerDelegateProxy.Callback(Object sender, EventArgs e) +51
System.Web.UI.Control.OnLoad(EventArgs e) +95
System.Web.UI.Control.LoadRecursive() +59
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +678

Suggestions are welcome!
Thanks!

Roberto


Rendering with values from other columns, and pre-selecting rows based on a cell value

0
0

I have data like this (simplified):

    [
        {
            "songid":       "56",
            "title":   "Song A",
            "tagged":     "0",
            "audio":     "1",
            "chords":     "1"
        },
        {
            "songid":       "7",
            "title":   "Song B",
            "tagged":     "1",
            "audio":     "0",
            "chords":     "1"
        }
        {
            "songid":       "24",
            "title":   "Song C",
            "tagged":     "0",
            "audio":     "0",
            "chords":     "0"
        }
    ]

I want to do two things when the table is set up. The first is to render the title cell with stuff that comes from three other pieces of data in the row: songid, audio, and chords. The song title would become a hyperlink that uses the songid, and that would be followed by an icon if audio=1 and/or another icon if chords=1. For example, the desired result for the first row in the above example is:

<a href="song.php?sid=56">Song A</a>&nbsp;<img src="graphics/audio.gif">&nbsp;<img src="graphics/guitar.gif">

The docs give the following example of using a function for columns.render:

    render: function ( data, type, row, meta ) {
      return '<a href="'+data+'">Download</a>';
    }

But I don't know how to reference a different column. Just from the parameter names, it looks like row might somehow hold the data for the whole row or something, but I don't know how to use it and can't find any documentation about it. Just for the simple hyperlink part, I tried:

    render: function ( data, type, row, meta ) {
      return '<a href="song.php?sid='+row.songid+'">'+data+'</a>';
    }

But it returned "undefined" for row.songid.

The second thing I want to do is pre-select the rows that have tagged=1. Based on clues I picked up from various sources in the docs, I thought this would do it:

    table.rows( function(idx, data, node) { return data.tagged == 1; }).select();

But it doesn't appear to do anything - no rows get selected.

Any clues on either of these?

C# ServerSide not working

0
0

I have created an api but it loads all the data and ignore serverside:true, please help?

$(document).ready(function () {
$.ajax({
"dataType": "application/json",
"type": "GET",
"url": "http://localhost:54888/api/order",
"success": function (dataStr) {
console.log(dataStr.responseText);
// laod Data to DataTable Jquery
var resp = jQuery.parseJSON(dataStr.responseText ? dataStr.responseText : dataStr);
$('#example').DataTable({
data: resp["rows"],
columns: resp["aoColumns"],
scrollX: true,
autoWidth: true,
bScrollCollapse: true,
// paging: true,
// retrieve: true,
"jQueryUI": true,
/serverSide: true,
processing:true

                });
            },
            "error": function (dataStr) {
                //console.log(dataStr);
                var resp = jQuery.parseJSON(dataStr.responseText ? dataStr.responseText : dataStr);
                $('#example').DataTable({

                    data: resp["rows"],
                    columns: resp["aoColumns"],
                    scrollX: true,
                    autoWidth: true,
                    bScrollCollapse: true,
                    //paging: true,
                    //retrieve: true,
                    "jQueryUI": true,
                    serverSide: true,
                    processing: true
                });

            }
        })
    });

RowGroup 1.1.0

0
0

There are some errors in this version:

line 239: group = that.c.emptyDataGroup;
should be (that is undefined):
line 239: group = this.c.emptyDataGroup;

line 325: if ( typeof display === 'object' && display.nodeName && display.nodeName.toLowerCase() === 'tr') {
should be (display may be null):
line 325: if ( typeof display === 'object' && display && display.nodeName && display.nodeName.toLowerCase() === 'tr') {

line 328: else if (display instanceof $ && display.length && display[0].nodeName.toLowerCase() === 'tr') {
should be (display may be null):
line 328: else if (display instanceof $ && display && display.length && display[0].nodeName.toLowerCase() === 'tr') {

Client side row reordering issues

0
0

Hi, We are using DataTables to edit some data on client side, but we have issues if we use reordering option or if we delete rows.
In general we need functionality which is in this example, but on Client side
https://editor.datatables.net/examples/extensions/rowReorder

Do you have any hints how to update DataTables after we do some manipulation like deleting elements or reordering.
It would be perfect to get same example working on Client side data.

Swedish letter not shown correct for editor

0
0

I have an editor where I set the language options with an url (file) like
'language': { 'url': '/js/language/datatables_swe.json' }
the json file contains the same strings that work when I set them in the javascript file

{
  
    "sEmptyTable": "Tabellen innehåller inget data",
    "sInfo": "Visar _START_ till _END_ av totalt _TOTAL_ rader",
    "sInfoEmpty": "Visar 0 till 0 av totalt 0 rader",
    "sInfoFiltered": "(filtrerade från totalt _MAX_ rader)",
    "sInfoPostFix": "",
    "sInfoThousands": " ",
    "sLengthMenu": "Visa _MENU_ rader",
    "sLoadingRecords": "Laddar...",
    "sProcessing": "Bearbetar...",
    "sSearch": "Sök:",
    "sZeroRecords": "Hittade inga matchande resultat",
  "oPaginate": {
    "sFirst": "Första",
    "sLast": "Sista",
    "sNext": "Nästa",
    "sPrevious": "Föregående"
  }
}

But when I set them that way the swedish letters å, ä and ö are shown as a questionmark (?).
Any suggestions how I can fix that ?

Implementing custom action on button (search and replace)

0
0

Hi,

I want to implement a custom action on a button (search and replace). I found already the multi-row (bulk edit) blog post and implementet my function like that.

I have the following javascript code in the Buttons section in my DataTable object:

{
text: "search and replace",
action: function (e, dt, node, config) {
    var searchTerm = new RegExp($('#search').val());
    var replaceTerm = $('#replace').val();
    var rows = table.rows( {selected: true} ).indexes();
    editor.edit(rows, false);
    $.each(rows, function(i, rowIdx) {
    var value = table.cell(node).data();
    if (searchTerm !== '' && searchTerm.test(value)) {
        if (replaceTerm !== '') {
        editor.field('someField').multiSet(row.id(), row.data().someField.replace(searchTerm, replaceTerm));
        }
    }
    });
    editor.submit();
},
editor: editor
}

When I am searching and replacing for one term only it works fine. But if I want to search and replace multiple values on multiple rows it won't work.

The replace function works fine. console.log prints out the correct values. But these values aren't set inside the table row(s) and sent properly to the backend.

Any suggestions? Or is this impossible?

Checkbox submitting value as an array

0
0

I feel like I'm being really dumb here.

I want a checkbox for my editor field. When the user ticks it, I want a number 1 to be sent to the database. When unticked it needs to be a 0.

I tried the following for my editor field:

                label: "Tickbox:",
                name: "tickbox",
                type: "checkbox",
                options: [
                   { label: '', value: 1 }
                ],
                unselectedValue: 0

When I look at the data in presubmit, I see that it sends the value as an array:

tickbox: (1) […]
​​​​​   0: 1
   ​​​​length: 1

How can I convert this to a number?


Using column(x).search(v).draw() doesn't work unless I Destroy() first

0
0

As mentioned above, I am attempting to use some Buttons to filter to content. Using a button click, I attempt to filter based on a specific column..

The below works IF I use table.destroy...but doing that causes the table to lose its layout?

 initComplete: function () {
            //Use Buttons to change Region
            $('#table-filters').on('click', function (event) {

                var v = $(event.target).val();
                var i = event.target.id;

                var table = new $.fn.dataTable.Api("#datatable");
                table.destroy();
                table.column(19).search(v).draw();

            });

Datatables Editor SUM how ?

0
0

im want sum columns total but server side ..

client side working all page total sum make but server side just one page sum make ?

im how make total and pagetotal for serverside ?

customize the query of the Export buttons in Excel and PDF

0
0

Hi,

Can I make the Excel that the datatable exports add more data than the ones shown in the table?

Could you customize the query of the Export buttons in Excel and PDF?

File upload not working with two Editors on same page

0
0

One of the tables used in my application has a large number of fields, including two fields used to hold references to file uploads (one an image the other a pdf). Because the number of fields is large, I'm using multiple tabs to segregate the data into reasonable size chunks. Each tab has its own editor to handle the data within that tab. Works well, but I've run into an issue when uploading image and pdf files.

One of the editors ends up referencing the incorrect set of files when attempting to open the editor. I've created a fairly easily replication of the problem starting with the Editor sample upload.html/php. To reproduce, do the following:

Add another column to the users table as pdf int default NULL, and recreate the sample database.

Copy upload.html to uploadTest.html and modify contents as follows:

<snip><snip><snip>

var editor1; // use a global for the submit and return data rendering in the examples
var editor2; // use a global for the submit and return data rendering in the examples

$(document).ready(function() {
    editor1 = new $.fn.dataTable.Editor( {
        ajax: "../../controllers/uploadTestImage.php",
        table: "#editor1",
        fields: [ {
                label: "Last name:",
                name: "last_name"
            }, {
                label: "Image:",
                name: "image",
                type: "upload",
                display: function ( file_id ) {
                    return '<img src="'+editor1.file( 'files', file_id ).web_path+'"/>';
                },
                clearText: "Clear",
                noImageText: 'No image'
            }
        ]
    } );

    var table = $('#editor1').DataTable( {
        dom: "Bfrtip",
        ajax: "../../controllers/uploadTestImage.php",
        columns: [
            { data: "last_name" },
            {
                data: "image",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor1.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No image",
                title: "Image"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor1 },
            { extend: "edit",   editor: editor1 },
            { extend: "remove", editor: editor1 }
        ]
    } );

    editor2 = new $.fn.dataTable.Editor( {
        ajax: "../../controllers/uploadTestPDF.php",
        table: "#editor2",
        fields: [ {
            label: "Last name:",
            name: "last_name"
        }, {
            label: "PDF:",
            name: "pdf",
            type: "upload",
            display: function ( file_id ) {
                return '<img src="'+editor2.file( 'files', file_id ).web_path+'"/>';
            },
            clearText: "Clear",
            noImageText: 'No image'
        }
        ]
    } );

    var table = $('#editor2').DataTable( {
        dom: "Bfrtip",
        ajax: "../../controllers/uploadTestPDF.php",
        columns: [
            { data: "last_name" },
            {
                data: "pdf",
                render: function ( file_id ) {
                    return file_id ?
                        '<img src="'+editor2.file( 'files', file_id ).web_path+'"/>' :
                        null;
                },
                defaultContent: "No PDF",
                title: "PDF"
            }
        ],
        select: true,
        buttons: [
            { extend: "create", editor: editor2 },
            { extend: "edit",   editor: editor2 },
            { extend: "remove", editor: editor2 }
        ]
    } );

} );



    </script>
</head>
<body class="dt-example php">
    <div class="container">
        <section>
            <h1>Editor example <span>File upload</span></h1>
            <div class="info">
                <p>This example shows Editor being used with the <a href="//editor.datatables.net/reference/field/upload"><code class="field" title=
                "Editor field type">upload</code></a> fields type to give end users the ability to upload a file in the form. The <a href=
                "//editor.datatables.net/reference/field/upload"><code class="field" title="Editor field type">upload</code></a> field type allows just a single file to be
                uploaded, while its companion input type <a href="//editor.datatables.net/reference/field/uploadMany"><code class="field" title=
                "Editor field type">uploadMany</code></a> provides the ability to have multiple files uploaded for a single field.</p>
                <p>The upload options of Editor are extensively documented in the manual (<a href="//editor.datatables.net/manual/upload">Javascript</a>, <a href=
                "//editor.datatables.net/manual/php/upload">PHP</a>, <a href="//editor.datatables.net/manual/net/upload">.NET</a> and <a href=
                "//editor.datatables.net/manual/node/upload">NodeJS</a>) and details the various options available.</p>
                <p>In this example an image file can be uploaded, limited to 500KB using server-side validation. To display the image a simple <code class="tag" title=
                "HTML tag">img</code> tag is used, with information about the file to be displayed retrieved using the <a href=
                "//editor.datatables.net/reference/api/file()"><code class="api" title="Editor API method">file()</code></a> method which Editor makes available and is
                automatically populated based on the server-side configuration.</p>
            </div>
            <div class="demo-html"></div>
            <table id="editor1" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>Last name</th>
                        <th>Image</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th>Last name</th>
                        <th>Image</th>
                    </tr>
                </tfoot>
            </table>
            <table id="editor2" class="display" cellspacing="0" width="100%">
                <thead>
                <tr>
                    <th>Last name</th>
                    <th>PDF</th>
                </tr>
                </thead>
                <tfoot>
                <tr>
                    <th>PDF</th>
                    <th>Image</th>
                </tr>
                </tfoot>
            </table>
            <ul class="tabs">
                <li class="active">Javascript</li>
                <li>HTML</li>
                <li>CSS</li>
                <li>Ajax</li>
                <li>Server-side script</li>
            </ul>
            <div class="tabs">

<snip><snip><snip>

Then, copy upload.php to uploadTestImage.php and change as follows:

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'last_name' ),
        Field::inst( 'image' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
                ->db( 'files', 'id', array(
                    'filename'    => Upload::DB_FILE_NAME,
                    'filesize'    => Upload::DB_FILE_SIZE,
                    'web_path'    => Upload::DB_WEB_PATH,
                    'system_path' => Upload::DB_SYSTEM_PATH
                ) )
                ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                ->validator( Validate::fileExtensions( array( 'png', 'jpg', 'jpeg', 'gif' ), "Please upload an image" ) )
            )
    )
    ->process( $_POST )
    ->json();

Similarly, copy upload.php to uploadTestPDF.php and changes a follows:

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( "../lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;


// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'users' )
    ->fields(
        Field::inst( 'last_name' ),
        Field::inst( 'pdf' )
            ->setFormatter( Format::ifEmpty( null ) )
            ->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'].'/uploads/__ID__.__EXTN__' )
                ->db( 'files', 'id', array(
                    'filename'    => Upload::DB_FILE_NAME,
                    'filesize'    => Upload::DB_FILE_SIZE,
                    'web_path'    => Upload::DB_WEB_PATH,
                    'system_path' => Upload::DB_SYSTEM_PATH
                ) )
                ->validator( Validate::fileSize( 500000, 'Files must be smaller that 500K' ) )
                ->validator( Validate::fileExtensions( array( 'pdf' ), "Please upload a PDF file" ) )
            )
    )
    ->process( $_POST )
    ->json();

Now you're ready to test. Load the uploadTest.html and you should see two tables, each with two columns. First table has Last Name and Image columns, second table has Last Name and PDF columns. All good to this point.

Next, select first record in first table, then Edit first table, and upload any image. This is good.

Then, select second record in second table, then Edit second table, and upload any PDF. This works too.

Next, refresh the page. Image and PDF are there. That's good.

Now select the first record in first table, and then Edit first table. Doesn't work. Edit button just shows spinning cursor. I poked around down into DataTables.editor.min.js:105 -- and wrong array of files seems to be there (array from second editor, not first one).

If you refresh the page, select the second record in the second table, and then Edit, everything works okay.

Somewhere along the way, the list of files used for each editor is getting out of synch.

Note, I am using DataTables 1.10.18 and Editor 1.8.1 for both my own application, and for the example that I reproduced above.

Also, I did make the change you outlined in this fix from this issue to editor.php, but the problem still exists for me.

Column width error on Safari/OSx

0
0

We have a table with ScrollX, ScrollY, FixedHeader and FixedColumn (0) and everything works fine with Chrome (Windows and Android) and with Firefox (Windows) as you can see in the following picture

With Safari on MAC it seems the column width is calculated considering the complete string
IT043FO111‑CSD IT027PG401‑MAR
without taking in account it shall be splitted in two rows
IT043FO111‑CSD
IT027PG401‑MAR

Please refer to the following picture

Thanks for your support

Viewing all 79329 articles
Browse latest View live




Latest Images