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

Responsive Plugin jQuery 3.0.0 d.isEmptyObject is not a function

December 5, 2018, 8:45 am
$
0
0

I am trying to use the responsive plugin with my mvc application. The app uses jquery 3.0.0. When i try to run the responsive plugin v 2.2.2, i receive the following error:

d.isEmptyObject is not a function. /Responsive-2.2.2/js/dataTables.responsive.min.js:19:236)

I would assume that jQuery 3.0.0 no longer supports that function? I have tried doing some research to see there is a replacement function in jquery to the isEmptyObject, but have had no luck. Is there any chance you guys (the developers of the responsive plugin) have had any luck updating the plugin to work with jQuery 3.0.0? Unfortunately, the project i am doing does require that version for other stuff.

As always thanks to everyone who works on the datatables project!

↧
Search
↧

Clone only one Paging Button

December 5, 2018, 11:13 am
$
0
0

Hello,
is it possible to just clone one paging button outside the maintable ? I know how to di it for the whole pagination

$(document).ready(function() {
  $("#example").dataTable();
  $("#mynewdiv").append($(".dataTables_paginate"));
} );

but is there a way to do it only for the last button ? Something like that.

$("#mynewdiv").append($(".dataTables_paginate.last"));

Thanks

↧

Request for ColReorder: also take columns in child row in consideration.

March 11, 2018, 10:04 am
$
0
0

ColReorder works nice, but I am missing a very important part.

I am using responsive tables, so sometimes not all columns are visible in the row, and yes in the child row. ColReorder does not allow me to drag the most right visible column to the right. Something which I would like, to change its position which one, or more (depending on the column widths) columns in the child row.

I would be even nicer if it was possible to drag a column from the child row to the table row, but that is not a functional need, but more an esthetic one.

↧

child-row expand button in responsivePriority

December 5, 2018, 1:10 pm
$
0
0

I have a table that works well. It is fairly simple.
It gets defined with this:

$.extend( $.fn.dataTable.defaults, {
    responsive: true
} );  
    var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "somefile.php",
        columns: [
            { data: "FirstName" },
            { data: "LastName"},
            { data: "LevelofAccess"}
        ],
        select: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        columnDefs:[
            { targets: [2],
              createdCell: function (td, cellData, rowData, row, col) {
                if ( cellData == 'Not assigned' ) {
                  $(td).css('color', 'red');
                }
              }
            }
        ]
    } );

Everything works fine.
But I want it to behave such that when it is in a small screen, and there is room only for one column, the one that shows is the second column (1 in the array).
I tried { responsivePriority: 1, targets: 1 } in columns[] and also in columnDefs[]
It works in both.
The problem is that the child-row expand button does not display anymore. If I get the responsivePriority parameter, the button is back.

Any ideas of what the issue might be?

↧

Exclude rows from search

December 5, 2018, 1:18 pm
$
0
0

Rows with a specific class (or row indexes) should be ignored by the search and remain visible although the search term does not fit. My use case is that new rows are added dynamically and therefore some columns are not filled yet and so they are currently hidden because of an existing search.

I tried it with $.fn.dataTable.ext.search.push(...) but this is just an additional search filter.

Is there an option for this requirement or can I override the default behavior in some way?

↧
↧

Ms sql decimal precision

December 5, 2018, 2:10 pm
$
0
0

Hello!
Please tell me how to set up for ms sql column decimal(12,3) three decimal part position no more in my grid.
I want to protect user to insert more decimal part.
Is it possible?
Thank you

↧

JSONP - Link to JSON data file?

December 3, 2018, 7:15 pm
$
0
0

Hello,

I'm trying to get my head around server side loading and I'm not quite grasping the info on this page -
https://datatables.net/examples/server_side/jsonp.html

It looks to me like the Javascript links to the php file (the code in the Server Side Script tab), but nothing links to the JSON data source (the data in the AJAX tab)... Is that right?

I'm pretty comfortable with something like this (in Javascript):

    $('#example').DataTable( {
        "ajax": "url: link/to/file/data.json"
    } );

But if I want to serve the data.json file from a different server, then I add a php file to my server but how / where do I link to the data.json file? Trying to recreate the files in the example linked above gives me the error message Ajax error. For more information about this error, please see datatables.net/tn/7

What am I missing? My apologies if it's something basic; I've always been more front-end focused but I'm trying to learn a bit more back end lately

Thanks!

↧

Problem with row with className not being hid after search on mobile

November 28, 2018, 5:06 pm
$
0
0

I have a table using server-side processing that has some very customized formatting on mobile pictured here (with titles edited out because they have private information):

I use the search capability to get just the first one, and then I delete my search term and am left with this:

As you can see, after searching and removing the search term, I am left with two extra links to the Participants and Status pages that shouldn't be there. If you inspect them, they both look like this:

<td class=" min-tablet-l">
    <a href="#">
        <i class="fa fa-user-plus fa-3x"></i>
    </a>
</td>

That class (min-tablet-l) should in theory keep that hidden. Would you have any ideas why this is happening and how to fix it? I can post more code if need be, but I think this is enough right now.

↧
Search

DataTables version

December 5, 2018, 6:13 pm
$
0
0

3 months ago I had downloaded DataTables 1.10.19 from the site. I just checked now and was surprised to see that the version available for download now is 1.10.18. What happened?

↧
↧

How do I create a link that opens editor?

November 15, 2018, 1:06 pm
$
0
0

I would like to create a login link on a page simular to the Login/Register link on this site. When the link is clicked it should open editor so a user can enter there username and password. Can someone show me some working code?

Thank you

↧

Fields.submit is not working. What am I doing wrong?

December 5, 2018, 6:40 pm
$
0
0

I have a password field and a confirm password field. I am comparing the password fields and only want the password sent to the database not the repassword (Confirm Password). But I can't seem to get it to work. My code is as follows...

 $(document).ready(function() {
     editor = new $.fn.dataTable.Editor( {
         ajax: "users-con.php",
         table: "#users",
         fields: [ {
                 label: "Password:",
                 name: "oesa_users.password",
                 fieldInfo: "Password must be 8 charactors or more!",
                 type: "password",
             }, {
                 label: "Confirm Password:",
                 name: "repassword",
                 **submit: false,**
                 fieldInfo: "Type in the same password as above.",
                 type: "password",
             }
 ...

I also have an editor preSubmit like so...

        editor.on('preSubmit', function( e, data, action ){
        if(action === 'edit' || action === 'create' ){
          var password = this.field('oesa_users.password').val();
            var repassword = this.field('repassword').val();
            var password_length = this.field('oesa_users.password').val().length;
     //--- Compare Password and Confirm fields. ---//
       if ( ( password === repassword ) && (password >= 8) && ( password !== '' ) ) {
 //        alert('Encrypt the password');
                return true;
       }
     //--- Check if both fields match. ---//    
       else if ( password !== repassword ) {
                alert('Password and confirm password does not match!');
                return false;
       }
            //--- Check if password is blank. ---//    
       else if ( password === '' ) {
                alert('Password cannot be blank!');
                return false;
       }
                        //--- Check if password has enough charactors. ---//    
       else if ( password_length < 8 ) {
                alert('Password needs 8 charactors or more!');
                return false;
       }
        }
 })

Then it goes to the server side script to be posted. I thought I read that Fields.submit would allow or prevent the submission of the field but it is not working for me. I am still seeing it in the developer tools and editor throws an error because the repassword is not a field in the database...

data[row_9][oesa_users][password]: password
data[row_9][oesa_users][user_telephone]: 9168435555
data[row_9][oesa_users][permissions]: admin
data[row_9][oesa_users][status]: ACTIVE
data[row_9][oesa_users][last_verified]: 2018-12-03
**data[row_9][repassword]: password**
↧

Preset values in dropdown for individual column search select

December 5, 2018, 8:20 pm
$
0
0

Hi,

using the example"Individual column searching (select inputs)" , i have a column where i have multiple <span> element values in a single row cell, see screen img below.

If i use this.api().columns([1, 6, 7, 9]).every( function () { (col.7) will display the entire cell value as a string, giving me multiple combination option in my dropdown.. (i.e "BPCMBPD", "BPCM", "BMCMBPMO")

I want to preset these values (i.e "BPCM", "BPD", "BPMO" etc) in a column dropdown, so that once filtered, will display the value selected and subsequent span elements within its column cell.

Cheers.

$(document).ready(function() {
    $('#example').DataTable( {
              "responsive":     true,
              "scrollY":        '50vh',
              "scrollX":        false,
              "scrollCollapse": true,
              "paging":         true,
              "order": [[ 5, "desc" ]],
              "lengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],

        initComplete: function () {
             this.api().columns([1, 6, 7, 9]).every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    var val = $('<div/>').html(d).text();
                    select.append( '<option value="' + val + '">' + val + '</option>' );

                } );
            } );

        }

    } );

} );
↧

Datatable taking too long to render the view for 2088 count of data.

November 20, 2018, 5:35 am
$
0
0

I have a lot of data that needs to be put in the datatable. The code was written long back that rewriting the code will be a huge task for me to add server side pagination.
So I had applied a filter 'Sub Brand' so that I can reduce the count of data coming in the UI.

The count of data reduced significantly by the ratio, but still there were 2088 data that needs to be populated in the datatable.
However, 2088 was still taking a time of almost 8-10 seconds.

I tried improving the SQL query so that I can just fetch whatever data I need for the particular page. Even though the query executed faster than before, the time taken for the UI to load is still the same, without any significant change.

Could you suggest me a solution for this, excluding server side pagination for now?
If there are no other solutions, that's the one I will probably have to go ahead with, but considering the time and testing it requires, I'm not really sure if my colleagues would suggest that way.

Thanks!

↧
↧

Prevent Datatable collapsing

December 6, 2018, 12:39 am
$
0
0

When there are rows which didnt fit in screen datatable collapses and display button + .So I want to datatable should fit to screen and show all rows.

↧

Implementing custom action on button (search and replace)

December 5, 2018, 2:02 am
$
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?

↧
Search

datatable reorder modal open problem

December 6, 2018, 3:42 am
$
0
0

hello my friend.
edit does not work when I reorder and respond to the table.he doesn't count on the button.

                <th>TC NO</th>
                <th>Ad</th>
                <th>Soyad</th>             
                <th style="width:5%">Sil</th>
                <th style="width:5%">Düzelt</th>
                <th style="width:5%">Seçmen Detay</th>
            </tr>
        </thead>
        @foreach (var Secmen in Model)
        {

            <tr>

                <td>@Secmen.TCNo</td>
                <td>@Secmen.Ad</td>
                <td>@Secmen.Soyad</td>

                <td><a href='/Secmen/SecmenSil/@Secmen.ID' class='btn btn-shadow btn-group-md' onclick="return confirm('@Secmen.TCNo TC Numaralı @Secmen.Ad @Secmen.Soyad İsim Soyisimli Kişiyi Silmek İstediğinizden Emin Misiniz?');"><span class="fas fa-trash-alt"></span></td>

                <td><a data-id="@Secmen.ID" class="btn btn-shadow  btn-md" /><i class="fas fa-edit"></i></td> //edit here.
                <td><a href="/SecmenDetay/SecmenDetay/@Secmen.ID" class="btn btn-shadow btn-group-md" id="btn-update" /><i class="fas fa-search"></i></td>
            </tr>
        }
    @Html.PagedListPager(Model, _sayfaNo => Url.Action("Secmen", "Secmen", new { SayfaNo = _sayfaNo }))

</div>

//script
(document).ready(function () {
('.table').on('click', 'btn-md', function () {
$("#myModal").modal("show");
...
//script
var table = ('#table').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.19/i18n/Turkish.json",

                },
                "pageLength": 100,
                'iDisplayLength': 100,
                "paging": false,
                "ordering": false,
                rowReorder: {
                    selector: "td:nth-child(3)"
                },
                responsive: true,
               "renderer": $.fn.dataTable.Responsive.renderer.tableAll({
                    tableClass: 'table'
                })


        });
↧

DataTable Export Not showing Loader

December 6, 2018, 4:40 am
$
0
0

I wanted to show the Export button on different location as per my UI requirement, so I have customized the location of Export button of DataTable. using below code.
Export takes some time, so I want to show loader image while Exporting takes place. Export takes time but loader image not getting displayed.
But If I debug the JS loader image gets displayed.
Can someone guide me here.
`$(function () {

        $('.Export').on('click', function () {
            $("#loaderImage").show();
            $("div#divExportButton button").click();
            $("#loaderImage").hide();
        }); /* Export Grid */

});`

↧
↧

Using datatables.net library without pay

December 6, 2018, 5:02 am
$
0
0

I recently has been watched e-learning on youtube, and below was link to download source.
Please tell me wheathe can I use files without any pay? Are they free to use as I want and add to my project?

<script src="//cdn.datatables.net/1.10.18/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.18/js/dataTables.bootstrap.min.js"></script>
↧

Swedish letter not shown correct for editor

December 6, 2018, 6:17 am
$
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 ?

↧

Ajax Reload for just one row? Alternatively speed up reload

December 6, 2018, 6:34 am
$
0
0

Hi,

I have a table where a user from an input field can increase current stock qty.
When a user adds that number I would like to refresh the row instantly so the column for current stock updates.

Using table.ajax.reload(null, false) certainly works but the whole table is refreshed which leads to some delay and not optimal user experience.

Also using some css element manipulation wont work, because there maybe multiple users inputting at the same time so I really need the Database value fetched

↧
Viewing all 79586 articles
Browse latest View live
More Pages to Explore .....
Search

Latest Images

Nonprofit donates custom home in this East Bay city for Marine injured in...

Nonprofit donates custom home in this East Bay city for Marine injured in...

April 23, 2024, 7:00 am
New private rooms on Tokaido Shinkansen change the way we travel from Tokyo...

New private rooms on Tokaido Shinkansen change the way we travel from Tokyo...

April 22, 2024, 6:00 am
Ukraine bans military from online gambling amid addiction concerns

Ukraine bans military from online gambling amid addiction concerns

April 22, 2024, 5:17 am
ಮಂಡ್ಯದಿಂದ ಸುಮಲತಾ ದೂರ; ಹೆಚ್‌ಡಿಕೆ ಪರ ಪ್ರಚಾರಕ್ಕಿಳಿಯದ ಸಂಸದೆ –ಬರ್ತಾರೆ ನೋಡೋಣ ಎಂದ...

ಮಂಡ್ಯದಿಂದ ಸುಮಲತಾ ದೂರ; ಹೆಚ್‌ಡಿಕೆ ಪರ ಪ್ರಚಾರಕ್ಕಿಳಿಯದ ಸಂಸದೆ –ಬರ್ತಾರೆ ನೋಡೋಣ ಎಂದ...

April 20, 2024, 8:08 pm
OCBC Bank Singapore Offers Up to 2.8% p.a. Fixed Deposit Promotion from 21...

OCBC Bank Singapore Offers Up to 2.8% p.a. Fixed Deposit Promotion from 21...

April 20, 2024, 12:38 pm
National Poetry Month 2024: Maxine Starr

National Poetry Month 2024: Maxine Starr

April 19, 2024, 9:56 am
Vegan Chicken Pot Pie

Vegan Chicken Pot Pie

April 19, 2024, 9:18 am
Firefox UX: On Purpose: Collectively Defining Our Team’s Mission Statement

Firefox UX: On Purpose: Collectively Defining Our Team’s Mission Statement

April 19, 2024, 7:03 am
New $4.5 million East Bay trail path will connect bicyclists, pedestrians to...

New $4.5 million East Bay trail path will connect bicyclists, pedestrians to...

April 18, 2024, 11:05 am
Photographer Gifts for Clients / Print Packaging / 4x6 Photo Box by...

Photographer Gifts for Clients / Print Packaging / 4x6 Photo Box by...

April 17, 2024, 6:48 pm