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

JQuery Datatble is not showing data properly after scrolling the table

$
0
0

I have an application wherein I want to show table as a card list layout i.e. the each record/row would be a separate card and 3 such cards should be displayed in a row.I also want an infinite scroll with server side rendering.

scenario: total records are 105 and the length of the records is 30 but after scroll, it renders blank area and after 2nd/3rd draw the cards are displaying again.

Please find example below.

$(document).ready(function () {
    $(document).on('preInit.dt', function (e, settings) {
        let api = new $.fn.dataTable.Api(settings);
        api.page.len(30);
    });
    var dtable = $('#paginatedTable').dataTable({
        "processing": true,
        "serverSide": true,
        "searching": true,
        "deferRender": false,
        "order": [[0, "asc"]],
        "ajax": {
            "url": "/users/paginated/mysql"
        },
        "scrollY": '300px',
        "scroller": {
            " loadingIndicator": true,

        },
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "salary" }
        ],
        "createdRow": function (row, data, index) {

            if (data.id) {
                $('td', row).eq(0).addClass('text-left position-absolute l-0');
                $('td', row).eq(1).addClass('text-right position-absolute r-0');
                $('td', row).eq(1).addClass('alert-danger');
            }

        },

    });

    $('#search').on('keyup', function () {
        dtable.fnFilter(this.value);
    });
    $("#sortingId").change(function () {
        dtable.fnSort([0, $("#sortingId").val()]);
    });
    $("#sortingName").change(function () {
        dtable.fnSort([1, $("#sortingName").val()]);
    });

});

Failure Scenario-above mentioned scenario

working scenario-if there is only one card in a row, scrolling is working fine


File Upload to image for java controller

$
0
0

Hi,
If I want use java controller, what can I do?

public IHttpActionResult Staff()
{
var request = HttpContext.Current.Request;
var settings = Properties.Settings.Default;

using (var db = new Database(settings.DbType, settings.DbConnection))
{
    var response = new Editor(db, "staff")
        .Model<StaffModel>()
        .Process(request)
        .Data();

    return Json(response);
}

}

Empty table error with Scroller extension

$
0
0

Hello,

I would like to report that table with Scroller becomes empty after updating rows (adding, deleting, updating data) and table redrawing. Also appears empty space in the table when resizing.

Steps to reproduce error with redrawing table:
1. Scroll to the bottom of the table.
2. Wait a while until the data disappears from the table.

Steps to reproduce error with resizing
1. Scroll to the bottom of the table.
2. Pull the bottom border of the window up.
3. Pull the bottom border of the window down.
4. Repeat several times until the part of the table below is empty.

You can test it:
http://live.datatables.net/qixumapu/1/edit

check width of cells once table is loaded

$
0
0

I'm trying to measure the width of cells in fnDrawCallback .

docstable.DataTable().column(3).nodes().each(function (cell, i) {

console.log('$cell -----> ',cell);

}

the above code lets me know that i have located the correct cells

$(cell).addClass('test')

assures me that i am able to manipulate the DOM with this function

console.log('$cell -----> ',cell.offsetWidth);

returns a values of 0

i'm trying to find out which cells would be expanded beyond their default width. Those which would be are to have the css class added which contains overflow:ellipses. but without the measurements its impossible to do this calculation

How do I change data in the “draw” data in MySQL ssp before the JSON is created?

$
0
0

Hi!

I would like to wrap some data from ssp in the json to include some different html tags around the data. I couldn’t find anything in the forum about this. Would anyone know the answer?

Thanns

Width of "dataTable no-footer" (1321px) exceeds the width of its container (920px)

$
0
0

My dataTable has a width of 1321, my container which holds the dataTable has a max-width of 920px.

Why does it exceed its width limit, how can I prevent that? Manually overwrite the width has no affect on the width.

Edit: It only happens on some result (I built a search), sometimes the width is okay.

Thank you!

Load json data based on datepicker date

$
0
0

I have a json file with columned data per date (over 2500 dates)

Name | date 1 | date 2 | date 3
Value | value | value | value
Value | value | value | value
Value | value | value | value

I want to select a date from datepicker and load the first 3 columns from my json file and the column of the selected date.

I have been searching on how to do this but no luck yet.

Any ideas?
Thank you

Modify ajax url after editor object has been initialized

$
0
0

Dear all,

we have a DT and DT Editor in place. The content of the DT is dynamically updated subject to a selection made in a dropdown box (price list number - itpl_id). We use myTable.ajax.url(ajax_url + "&itpl_id=" + itpl_id).load(); for that.

Unfortunately there seems to be no documented api method in order to do the same with the DT editor ajax url. This means when we update a line for a pricelist id (itpl_id) other than the one we have created the myEditor object, it will disappear until we reselect a new itpl_id from the dropdown menu in order to update myTable.

Is there any (hidden) method we can use in order to modify the DT Editor ajax url? Thanks for your help in advance!

Kind regards,
Oliver


Load header based on json file

$
0
0

The json file is over 800 date records. Each date has to be an individual column with its data.

So far, i know that i need to define all columns when using json in order to draw the table.

I am new to this and I cant find a way to dynamic define the columns to draw the table.

Any advice will be much appreciated!

Is there a render function to limit characters displayed in a field in table view?

$
0
0

I have a table with half a dozen fields to display in table view. One of these is a comments field which could be a few words to a Michener novel. In PHP I can do something like:

$text = substr ($text,0,80);
if ( strlen ($text > 80 ) ) { $text = "$text ..."; }

An example please how to do this in datatables?

Bt the way, just wondering which formatting editor you are using here in the forum.

MDC for Web + Datatables

$
0
0

Hi,
will be supported MDC for web instead of MDL as this is outdated and no more updated by Google, since they are focusing on this lib.
Thanks

Inline editing 4.2 appearing as 4.1999998

$
0
0

Using datatable and Editor (in line) to allow a user to enter sample results.

Numbers such as 4.2 are being stores correctly in MY MSSQL DB but being displayed with a floating point error (I assume). Anywas I've got found the initial display by using ColumnDefs on the Datatable:

        columnDefs: [
          {
              render: $.fn.dataTable.render.number(',', '.', 1),
              targets: [3,4,5,6,7,8]
           }
        ],

which is great, however when I click in the 4.2 Aspergillus in the 2nd row I get:

Is there something similar to the columnDef for the datatable I can use? or is there another solution to get it to be 4.2 instead?

Thank you inadvance for any help given

is there any live example anywhere for select2 usage ?

$
0
0

is there any live example anywhere for select2 usage ?

page: 'current' selector-modifier returns too many rows

$
0
0

Hello,

in my table i have a drawCallback that calls another function. In this function I use DataTable().rows( { page: 'current' } ).every to do something (doesn't matter). I have pageLength: 10 set, but the current selector returns 20 rows?! This then causes errors in my function, that's how I noticed in the first place...

Table Data is populated via AJAX. I even tried initialising the table as empty and only add data on button press, but this doesn't change anything.

The table itself displays just fine, with 10 rows per page.

If I sort or switch to another page, the current selector correctly returns the 10 new rows.

What do?

use two or more tables from database in editor

$
0
0

I use codeigniter to create editor datatables, it was normal for one table, but when i use two tables, there problem in ajax, here is model.

public function getNdsar2020($post)
{
// Build our Editor instance and process the data coming from _POST
Editor::inst( $this->editorDb, 'ndsar2020' )
    ->fields(
        Field::inst( 'no_ndsar' ),
        Field::inst( 'tgl_ndsar' ),
            // ->validator( Validate::dateFormat( 'd/m/y' ) )
            // ->getFormatter( Format::dateSqlToFormat( 'd/m/y' ) )
            // ->setFormatter( Format::dateFormatToSql( 'd/m/y' ) ),
        Field::inst( 'surat' ),
        Field::inst( 'tgl_surat' ),
        Field::inst( 'keterangan' ),
        Field::inst( 'hal' )
    )
    ->process( $_POST )
    ->json();
}

public function getPelanggan2020($post)
{
// Build our Editor instance and process the data coming from _POST
Editor::inst( $this->editorDb, 'pelanggan_2020' )
    ->fields(
        Field::inst( 'nama_pelanggan' ),
        Field::inst( 'idpel' ),
        Field::inst( 'tarif_lama' ),
        Field::inst( 'daya_lama' ),
        Field::inst( 'tarif_baru' ),
        Field::inst( 'daya_baru' ),
        Field::inst( 'jumlah' ),
        Field::inst( 'alamat' ),
        Field::inst( 'daerah_kerja' ),
        Field::inst( 'kontak' )
    )
    ->process( $_POST )
    ->json();
}

}

****and then here my editorlib.****

public function process($post)
{   
    // DataTables PHP library
    require dirname(__FILE__).'/Editor-PHP-1.9.2/lib/DataTables.php';

    //Load the model which will give us our data
    $this->CI->load->model('Sar_model');

    //Pass the database object to the model
    $this->CI->Sar_model->init($db);

    //Let the model produce the data
    $this->CI->Sar_model->getNdsar2020($post);

    //Let the model produce the data
    $this->CI->Sar_model->getPelanggan2020($post);

}

i check the ajax load result with jsonlint, and here is the problem .

Would you give me solution ??


Extra column data function calls when using ajax.reload

$
0
0

If using server side mode, and your columns's data is specified with a function, I've found that when you call ajax.reload() on your table, it calls that data function on the old data before calling it on your new data.

Here is a jsfiddle example https://jsfiddle.net/anneb574/1o6mtwxc/23/
I have made it so that whenever the data function is called, it logs the id of the row, so you can see what it's being called on.

If you go to the second page of data, and click the reset button, you'll see that the function is called on the page 2 data twice before being called on the page 1 data.

This seems fairly harmless, albeit inefficient, but my setup is a bit more complex and it's causing issues for me. (basically, I have a complex data layer providing data to the table, which my column's data fn needs to access, but with extra calls to data that no longer exists, I have to add more logic to prevent errors)

asp.net dev/production config file

$
0
0

Is there a way to have two config files? When I publish to dev I want to connect to a different SQL server than when I publish the app to production.

or do I just need to go in and edit the connection string each time I publish?

Refresh child row when parent row updated

$
0
0

Hello, I have a simple datatables editor going and I'm trying to figure out how I can refresh a child row after updating the parent row's data. I assume I need to somehow either re-call/show the child row, but not sure how to do that. Thanks.

                   var editor = new $.fn.dataTable.Editor( {
                                    "ajax":{
                                            url:"php/table.php",
                                            type:"POST",
                                            data: function ( d ) {
                                                    d.is_date_search = $is_date_search; 
                                                    d.start_date = $start_date;
                                                    d.end_date = $end_date;
                                            }
                                    },
                            table: '#table',
                            fields: [
                                    {
                                            "name": "patients.patientID",
                                            "type": "hidden"
                                    } ,
                                    {
                                            "label": "atty id",
                                            "name": "patients.atty"
                                    }
                            ]
                    } );

        $('#table tbody').on('click', 'td.details-control', function () {
                var tr = $(this).closest('tr');
                var row = table.row( tr );

                if ( row.child.isShown() ) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
                }
                else {
                // Open this row
                row.child( format(row.data()) ).show();
                tr.addClass('shown');
                }
        } );

Database updated but not editor

$
0
0

I think I can explain this on the server side, but essentially, the Datatable isn't updated after an edit...at least not immediately. For instance, lets say the original value is 234, and I change it to 235 and save, the value in the data on the datatable shows 234. I then change it to 236 and save, after that, the datatable shows 235.

The server is C#, MVC, with SQL server. I decide to insert a breakpoint in the PreEdit and PostEdit inside of the controller as well as breakpoint in each. Inside the PreEdit, and expanding 'e' I see that the correct number has been submitted, 235.

editor.PreEdit += (sender,e) =>
{
...
}

editor.PostEdit += (sender,e) =>
{
...
}

I set a breakpoint right before the data is returned to the view (which is the Datatable), after resuming the code from PreEdit and it shows the old value of 234 after I scroll to the record I am editing (#1247 - I have quite a few rows. I would have expected it would have grabbed the latest value from the database, which is the one I see in the preedit.

I also view PostEdit and look at the form data (expanding 'sender'), and it is correct as well. Odd, though, in expanding 'e', it shows the first row of the Datatable, not the one being edited.

Another breakpoint, right before the result is returned back to the view shows that the value is still 235. The dataset being sent back, instead of the 1200+ rows, is just the first one.

Anyway, TLDR: The correct information is being sent, to the MVC controller, and the database is being updated, but the old data is being sent back to the view.

Thoughts?

Semantic UI and Editor seem to be not a good couple together

$
0
0

I do not know how to give a live example as the Editor is not available via CDN to link to the live editor. However, I am having a problem controlling the inline field width when a cell is edited.

The best way to describe it is, if the table's column header is 2 letters:

<table>
     <thead>
          <tr>
               <th>CT</th>
          <tr>
     </thead>
</table>

When you click in the cell to edit it, nothing is shown. I can add a few more letters to the name, and it will then start to show data. I have tried a bunch of semantic css as well as:

{
targets:[0],
width: "50%"
},

But nothing seems to fix it until I remove the "form" class from the cell, which at that point it turns it into datatables input field.

Viewing all 81693 articles
Browse latest View live


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