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

Code format in the examples in datatables forum

$
0
0

Hi,

I've noticed in most of the examples posted by users of the forum is not properly formatted. It is hard to read the code. Can it be fixed? I see the users posted code around the [code][/code] block while the editor I see has different wrap around for code with triple single back quotes(```). It would be very helpful for all if the old code block is replaced with the new formatting so that code appears standard and nice to read in all the posts. Sorry If this isn't the right place to ask.

Code Sample:

$("#table").DataTable({
     responsive: true,
     bFilter: false,
 });

Thanks,
Lakshman


Event for no records

$
0
0

Hello,

I would like to know whether there is an event that is triggered when there are no records (retrieved by AJAX, for e.g.). I am willing to not render the datatable so I can show a custom message of my own instead.

Thanks.

Problem retrieving data with two tables and POST requests with ajax().url(object).load()

$
0
0

Hi all,

I'm having an issue with post request. I have two different tables and I need to make a request when users click on the first table.
When an user clicks, a request is sent to the server so that I could draw the info.

So I create one table and add an event to one button on a <span>. When click, I try to reload the second table with:

oTable.ajax().url('http://www.example.com/object.json').load();

Everything seems ok through GET post. Reading in other related posts, I get a solution to make these requests through POST

https://datatables.net/forums/discussion/21940/how-to-pass-new-post-parameters-on-ajax-reload

So I need to pass to ajax.().url() an object with the configuration. I.e.:

object = {url: 'http:www.example.com', type: 'POST', data: {name: 'hey', surname: 'yo'}};

Now I try to get the data through:

oTable.ajax().url(object).load()

First try seems fine but when I try to give to it a second chance, it does not work.

First post: http://www.example.com/getData.php (with POST data)

Second post: http://www.example.com/[Object object] (WRONG PATH)

I found out that in datatable.js line 83104, we get the ajax.url() function definition. There, in the set section, depending on "settings.ajax", the function sets the param called "url" to "settings.ajax" or "settings.ajax.url".

Is that a mistake or a missunderstood from me? ajax.url() is always expecting a String so we could not load new data through POST?

Thank you very much in advance,

Julio


Related links: https://datatables.net/reference/api/ajax.url()

Datatable version: 1.10.11

ajax.url() function:

_api_register( 'ajax.url()', function ( url ) {
    var ctx = this.context;

    if ( url === undefined ) {
        // get
        if ( ctx.length === 0 ) {
            return undefined;
        }
        ctx = ctx[0];

        return ctx.ajax ?
            $.isPlainObject( ctx.ajax ) ?
                ctx.ajax.url :
                ctx.ajax :
            ctx.sAjaxSource;
    }

    // set

    return this.iterator( 'table', function ( settings ) {


         // HERE IS THE PROBLEM, IF "URL" is an object instead of an string containing the url


        if ( $.isPlainObject( settings.ajax ) ) {
            settings.ajax.url = url;
        }
        else {
            settings.ajax = url;
        }
        // No need to consider sAjaxSource here since DataTables gives priority
        // to `ajax` over `sAjaxSource`. So setting `ajax` here, renders any
        // value of `sAjaxSource` redundant.
    } );
} );

How to invoke datatable on a table inside hidden element?

$
0
0

I'm having a table inside a div element which is hidden on page load. Based on the user action I will show the div which also contains the datatable. So In my javascript if I invoke the table inside the hidden div, it gives me error in console,

TypeError: $(...).DataTable is not a function
$("#dataTbl").DataTable({

If I set the div to be visible on page load the initialization has no problem. How can I handle this situation?

How can I use "footerCallback" when I want read data from ajax

$
0
0

$('#dataTables-example').DataTable({
"ajax": "demo.txt",
"footerCallback": function ( row, data, start, end, display ){
...
}
})

It cannt get "data" when read data from Ajax, how can I use this function or other way to solution the problem.

Own classes for dataTables elements.

$
0
0

Hi.
Is any possibility to add own classes to elements generated by dataTables. Of course i can use addClass() but it isn't elegant solution. Here is link named "custom classes" but i cant find anything about it.
Thanks for help :)

I use 1.10.12

I need to set at staging site

$
0
0

Hello,

I have bought this DataTable, I need to test it on staging site. If I will apply my paid code on staging can I re-use it at live site?

Thanks and Regards

Add data from JSON and append custom column

$
0
0

I add data from JSON to my 'searchResults' table with this command

$('#searchResults').dataTable().fnAddData(JSON);

Where 'JSON' is variable with JSON returned from server. It works well. But I also want to add a column (let it be some <a href>) for each row, which content doesn't return in JSON and must be added to my datatable.

Is it possible?

Datatable created like this:
$(function(){
$("#searchResults").dataTable({
"paging": true,
"ordering": false,
"info": false,
"bFilter": false,
"bLengthChange": false,
});
})


On clicking editor field, displaying ID value instead of Label value

$
0
0

Here is my code,

var editor = new $.fn.dataTable.Editor({
                table: '.organisational-goal-inline-editor',
                idSrc: 'id',
                fields: [{
                        label: "Focus area",
                        name: "focus_area",
                        type: "autoComplete",
                        opts: {
                            source: output
                        }
                    }..........................




 var table = $(#example).DataTable({

 columns: [
                    {
                        data: null,
                        defaultContent: '',
                        className: 'select-checkbox',
                        orderable: false
                    },
                    {
                        data: "focus_area",
                        editField: "focus_area",
                        render: function (val, type, row) {
                            var focus_id = val;
                            return $.map(output, function (v) {
                                return v.value === focus_id ? v.label : null;
                            });

                        }
                    },

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Javascript doubt

$
0
0

How to bind javascript to Dataset in C#
C# will sent Dataset to Javascript

The example provided in the responsive sample doesn't work for me. Any help?

What's the best practices paging while ordering with large amount of rows?

$
0
0

I have a large amount of rows, more than 100,000 records, in a table which cols could be reordered.

when querying a page, the back-end(wrote in java) needs to query all the rows, reorder them, then return the specific page.

this will be quite slow, anyone has any ideas to make this faster?

using my own style

$
0
0

can i remove all built in styling and adding my own styling into all of component for datatables? especially for button and search box....?

I need to create dynamic html table from json.

$
0
0

Hi,

I need to create dynamic html table from json.

Also the coloumn names and coloum numbers are created at runtime from codebehind c# and passed as json.

The json is created from codebehind from asp.net c# code.

I am getting error as Uncaught TypeError: Cannot read property 'aDataSort' of undefined

Below is my HTML code :

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />

    <script type="text/javascript" src="//code.jquery.com/jquery-1.12.3.js">
    </script>

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

    <script type="text/javascript">

        function ShowData() {
            $.ajax({
                type: "POST",
                url: "Default7.aspx/ConvertDataTabletoJson",
                data: '{m_date: "1" }',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {

                    var json = JSON.parse(response.d);

                    var tableHeaders;
                    $.each(json.columns, function (i, val) {
                        tableHeaders += "<th>" + val + "</th>";
                    });

                    $("#tableDiv").empty();
                    $("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');


                    $('#displayTable').DataTable({
                        "order": [1, "asc"],

                    });



                    $('#displayTable').DataTable(json);

                },
                failure: function (response) {

                }
            });
        }



    </script>

</head>
<body>
    <form id="form1" runat="server">
        <div>
            <input type="button" id="btnShowData" value="Show Data" onclick="ShowData()" />
            <div id="tableDiv"></div>
        </div>
    </form>
</body>
</html>

Below is my Codebehind C# code :

[System.Web.Services.WebMethod]
    public static string ConvertDataTabletoJson()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ID");
        dt.Columns.Add("FName");
        dt.Columns.Add("LName");
        dt.Columns.Add("Title");

        DataRow dr1 = dt.NewRow();
        dr1["ID"] = "01";
        dr1["FName"] = "02";
        dr1["LName"] = "03";
        dr1["Title"] = "04";
        dt.Rows.Add(dr1);

        DataRow dr2 = dt.NewRow();
        dr2["ID"] = "11";
        dr2["FName"] = "12";
        dr2["LName"] = "13";
        dr2["Title"] = "17";
        dt.Rows.Add(dr2);

        System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
        List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
        Dictionary<string, object> row;
        foreach (DataRow dr in dt.Rows)
        {
            row = new Dictionary<string, object>();
            foreach (DataColumn col in dt.Columns)
            {
                row.Add(col.ColumnName, dr[col]);
            }
            rows.Add(row);
        }
        return serializer.Serialize(rows);
    }

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Unknown Number of Column With Each Query

$
0
0

I have a dropdown with a list of reports that can be run on a page. DataTables is using ajax to retrieve the correct number of rows, but I can't get the columns names to show up. My data is a JSON array of objects with the column name in each row.

{"action": "getReportData", "actionId": "21", "retVal": "True", "sqlCode": "0", "sqlMsg": "", "recordset": [ { "ShortCatalogName": "1949, General Statutes of Connecticut, Comley et al, 3v plus supps.", "LongID": "08024.0003.001", "CatalogID": "08024", "Downloads": 3 }, { "ShortCatalogName": "1949, General Statutes of Connecticut, Comley et al, 3v plus supps.", "LongID": "08024.0003.001", "CatalogID": "08024", "Downloads": 1 }, { "ShortCatalogName": "1875-, Georgia Attorney General Opinions", "LongID": "08027.1949.001", "CatalogID": "08027", "Downloads": 3 }, { "ShortCatalogName": "1875-, Georgia Attorney General Opinions", "LongID": "08027.1972.001", "CatalogID": "08027", "Downloads": 2 }, { "ShortCatalogName": "1888, Miller’s Annotated Code 1v+s.", "LongID": "08031.1888.001", "CatalogID": "08031", "Downloads": 2 } ] }


How to generate rowId client side?

$
0
0

The jQuery DataTables rowId reference shows an example of setting the rowId option to a column from the data source (server side). This setting is used for the "select" extension and retaining row selection on Ajax reload.

Is there any way to generate the row identifier value in one of the following ways?
1. Client side, or
2. As a combination of multiple columns from the data source, or
3. With static prepended text?

Example data source:

{
    "data": [
    {
        "aid": 5421,
        "bid": 4502,
        "name": "John Smith"
    }
}

Code:

$("#datatable").DataTable({
    select: true,
    //rowId: "aid" each row ID is the value of the "aid" column
    //       e.g., <tr id="5421">

    //rowId: 0 each row ID is the value of the 0-indexed column
    //       e.g., <tr id="5421"> (same as above)

    rowId: [0, 1] // How? row ID combined value of 2+ columns
                  // e.g. <tr id="5421-4502">

    rowId: "random" // How? random generated client-side ID
                    // e.g., <tr id="id34e04">

    rowId: {
        prepend: true,
        content: "id",
        column: "aid"
    } // How? prepend text to id
       // e.g., <tr id="id5421">
});

Export buttons not displaying on my site on IE when copied exact. Works on example

$
0
0

Hello.

When viewing https://datatables.net/extensions/buttons/examples/html5/simple.html in any browser except safari everything works great. This includes IE.

When viewing http://thinkzipp.com/test.php in Chrome and firefox it works great, however when I view it in IE11 it only displays the Copy button. I saw some other issues mentioning Flash, which is why im pointing out that it works fine on https://datatables.net/extensions/buttons/examples/html5/simple.html.

Does anyone see any issues on http://thinkzipp.com/test.php as to why the buttons will not display on IE11?

Reload dynamic dataTable

$
0
0

Using Laravel, I use various Views containing each a DataTable with the same class, and different IDs. At any moment there is only one dataTable loaded in View (HTML). I get my data from ajax server side. My question is better explained here: http://stackoverflow.com/questions/35625882/jquery-dynamic-datatables-reload

I am trying to keep my javascript as clean as possible so I would like to be able to refer to the currently loaded dataTable and ajax.reload it. Something like this:

   $(".mydttable").ajax.reload();

//where mydttable is the class of every datatable I use in my project. This should work in my opinion, but it shows me "Processing..." and hangs there without reloading the dataTable.

I also tried:

                var idtable = $('.mydttable').attr("id");

                var table = $('#'+idtable);

                table.ajax.reload();

Nothing happens (I mean the delete part works, except for the reload part, where it does nothing)

I also tried:

   $('.mydttable').dataTable().fnReloadAjax();

Also nothing happens.

Is there any way I can achieve this?

Datatable : add row and check added row's index

$
0
0

I want to check whether the newly added row appear in first page or not. One way of doing it is get the index, but I wonder why it doesn't work, the index for me is not accurate at all.

function add_row(name, time_taken, attempts) {
var t = $('#dashboard').DataTable();
var node = '';
node = t.row.add([
'',
name,
time_taken,
attempts
]).draw().node();
$(node).attr('id', concatSpaces(name)).hide().fadeIn('slow');

var index = t.row('#' + concatSpaces(name).index() // doesn't work
any thought? stuck for 2 hours long!

How to use Ternary Operator in AngularJS Expressions?

$
0
0

Hi everyone, i have been working on javascript language and want to know your views on Ternary Operation in AngularJS one of the great feature which provide an alternative to conditions such as if, else and end if.

Viewing all 82486 articles
Browse latest View live


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