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

Cannot read property 'style' of undefined - when select() is called on a newly created row

September 5, 2018, 9:07 pm
$
0
0

Hi,

I get "Cannot read property 'style' of undefined" when I run the following code

Cannot read property 'style' of undefined

                        $("#example").DataTable (
            {
                dom: 'rt',
                data : data,
                 select : {
                       style : 'single'
                } );

                var rowNode = $( "#example").DataTable().row.add([1,2,,3,4]).draw(false);
                var rowAdded = $( "#example" ).DataTable().rows()[0].length - 1; 
                $( "#example").DataTable().row(':eq('+rowAdded+')').select();

I also tried

 $( "#example").DataTable().row.add([1,2,,3,4]).draw(false).row().select()

and I get the same error.

It fails in the following function in dataTables.select.js on first line

         if ( force || ctx._select.style === 'single' )  
_select is undefined.

function clear( ctx, force )
{
    if ( force || ctx._select.style === 'single' ) {
        var api = new DataTable.Api( ctx );
        
        api.rows( { selected: true } ).deselect();
        api.columns( { selected: true } ).deselect();
        api.cells( { selected: true } ).deselect();
    }
}

Any idea what I could be doing incorrectly?

Thank you,

↧
Search

Individual column search on Enter key does not update other columns' values

April 7, 2020, 10:24 am
$
0
0

Hi there. I am having an issue with implementing Datatables with individual column search when pressing the Enter key.

I was able to implement it regularly from https://datatables.net/examples/api/multi_filter.html like this:

table.columns().every( function () {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );

The code above works fine. However, because the table uses server-side processing, it's too expensive to search on keypress.

So, I am attempting to change the code so that it searches on Enter key:

            table.columns().every(function () {
                var that = this;

                $('input', this.footer()).keypress(function (e) {
                    if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls
                        e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this
                        if (that.search() !== this.value) {
                            that
                                .search(this.value)
                                .draw();
                        }
                    }
                });
            });

With the code above, if I write a search value and press Enter, it searches as expected. However, if I write a search value in column1 but press enter on column2, it does not perform a search with the value in column1. This results in the user being required to press Enter on each column to add/delete the search value. The user is unable to first write search values in the desired columns and press Enter on one of them to search.

From what I've been able to gather, the table stores the value and it's not updated until Enter is pressed on the specific column. I am not sure how to get around this.

Thank you!

↧
↧

Bring Editor's Modal to Foreground

September 10, 2019, 6:44 am
$
0
0

I'm using Bootstrap's modal pop-up option to open a DataTable. This DataTable has an Editor instance associated with it.

The table opens in Bootstrap's modal pop-up just fine.

However, if I perform a New, Create, or Delete action, the Editor's pop-up shows behind the table pop-up.

Does anybody know a way to force the Editor pop-up to be in the foreground above all other modals?

Is this something as simple as setting some sort of "class" at editor.on( 'open', function ( e, type ), or something like that?

↧

Populate field based on ajax but don't submit it

July 31, 2019, 3:03 am
$
0
0

Maybe the title is a little confusing, I am going to try to explain this as clear as possible.

Let's say I have a student table and a payment table.

Student's Table

ID Name
1 Yoko
2 Wasis

Payment Table

ID studentID Payment
10 1 500000
11 1 250000

I hope you get the point.

Here is what I want to do.

In datatable Payment Table, when user click NEW, they can search the student's name (I can do this with select2 plugin). And when the user select the student's name, the field studentID will be populated based on the student's table. And when user submit the form, I don't want to submit the field Student's name.

Here is the form looks like :

Student's Name Yoko (Searched using select2, don't get submitted to the server)
Student's ID 1 (filled automatically based on student's name field)
Payment 5000000 (user put this manually)

I hope it makes sense.

↧

is it possible to use uploadMany without Join ?

April 7, 2020, 12:08 pm
$
0
0

I can't really make it works. It just keep throwing "Array to string conversion in MysqlQuery.php"

The example is using join table, is it possible to not doing this ?

↧
↧

Sort based on a value outside of the table

April 3, 2020, 3:31 pm
$
0
0

I have a table that describes features on a river and tells the minimum/maximum water level these features are available at ( https://potomac.surf/ ). I'd like to sort the table based on the current water level of the river, so that when you click MIN/MAX it sorts to what's in (water level is between min/max), too low (level is below min), too high (level above max).

Maybe change background color of that row as well to graphically show what features are in.

Essentially trying to recreate the behavior of this table: https://web.archive.org/web/20190313035916/http://www.dckayak.com/potomac-river-playspots

Any way to accomplish this?

↧

Sending all the pages with fields in the rows [My simple solution]

April 6, 2020, 8:51 pm
$
0
0

This is my simple solution

// MUST CHANGE BUTTON TYPE FROM "submit" TO "button"

$(document).ready(function() {
    $(document).on('click', '#IdButtonSubmit', function () {
    //$("#YourIdDataTable").css({display:'none'});  // if you don't want to show all the pages //
    $("select[name=YourIdDataTable_length]").val("-1"); // change the selected value to "All"
    $("select[name=YourIdDataTable_length]").change(); // Datatable detects the change
    $('#IdButtonSubmit').focus(); // focus submit button
    $("#IdForm").submit(); // submit the form


});
});

You need to add options to avoid resize the page.

↧

Uncaught TypeError: Cannot read property 'submit' of undefined

March 27, 2020, 4:46 am
$
0
0

cropping.it/Server_side_process_datatable/index.php

Hi,
I have put an URL in the CF_PIVA field, which should open a new page once it is clicked. Now i have two problems:
1- when i try to open the link, the frm.submit returns the error (Uncaught TypeError: Cannot read property 'submit' of undefined).
2- How can i see row of the table in the new page?
Is there someone who can give me some advice? Thank you

 <form id="frm-main" action=""  method="POST">
       <input type="hidden" name="CF_PIVA" value="">


$(document).ready(function() {
      var table = $('#AZIENDE_TEST').DataTable({
         "processing": true,
          "serverSide":true,
        "ajax": {
          url: "data.php"
        },
        columnDefs: [{
          targets: 9,
          render: function(data, type, row, meta) {
            if (type === 'display') {
              data = '<a class="link-post" href="http://cropping.it/Server_side_process_datatable/index.php/'+data+'" >' + data + '</a>';
            }
            return data;
          }
        }]
      });
      // Handle click on link in the table
      $('#AZIENDE_TEST').on('click', '.link-post','_blank', function(e) {
        e.preventDefault();

        // Get row data
        var data = table.row($(this).closest('tr')).data();

        var form = $('#frm-main').get(9);

        // Update form action URL if needed
         // form['action'] = this.href;

        // Set required form parameters
         // form['name'].value = data[9];

        // Submit form
        this.form.submit();
      });
    });
    </script>
↧
Search

multi-filter-select table row not appears when performed ajax call

April 7, 2020, 2:28 pm
$
0
0

Hi Allen,

I am using datatable for loading data (ServerSide Processing), so i have dropdown list <Departments>, by default first option selected when page loads so using ajax call I will pull the data from db related department employees.

On the first load, I am sending json data from server where i am use initcomplete function to form the Multi select dropdown and populate the data into list

It works well.

when I make another select from dropdownlist <departments> data getting populated but I am seeing row (multi select row) and initcomplete not hitting

I went across multiple Q&A, i found ajax.table.reload to use and initcomplete will fire only once

Can you please provide me working example where I can load and show data when i performed ajax call as well?

↧
↧

Can I use different orderSequences with orderData?

April 7, 2020, 2:24 pm
$
0
0

I have a few columns in my table whose default ordering direction is orderSequence: [ "desc", "asc" ]. Those columns contain cells which are mostly either empty or have a low numeric value (e.g. 1 or 2), so I'm making use of orderData to additionally sort the results by name, however, the column with the names is now sorted descending as well.

I thought something like orderData: [[ 2, "desc"], [ 1, "asc"]] might work, but I then found this answer were allan says, that this is currently not possible.

This answer is more than 2 years old, tho, so have there been any changes or are there any planned at all?
And if there haven't been, what could be a possible workaround or hack?

↧

jquery.pan (lightbox & zoom) with child-items / subrows

April 7, 2020, 1:58 pm
$
0
0

Dear community,
previously i was using featherlight for showing images from my tables in a lightbox. Just open test-sketch, open the first row, scroll down and click to the pictures.
https://codepen.io/tefole/pen/zYvOqRO

So far so good. Featherlight does not have a zoom function.

So, I end up finally between the (commercially) modulobox and jquery.pan

Right now i went further with jquery.pan, please check this:
http://live.datatables.net/yelebuta/1/edit?html,output

In the main-row the lightbox (class="pan") is running flawlessly.
But in the subrow/child-items, the lightbox its not working.

I guess the call
$(".pan").pan();
is not complete or has to be extended with the responsive JSON table ul li some thing like that, respectively not loaded/initialised on the right place.

After days of trial, i decided for asking support; can someone give me a hint, what I am doing wrong, respectively how can I get this jquery.pan working together with datatables.

Thx & Regards..

↧

SearchPanes - conditional format of list item

April 7, 2020, 4:46 pm
$
0
0

Is there a way to add formatting or classes to particular list items in the Search Panel. For example, if Due Date is past due, make the due date (or the whole row preferred) red and bold

↧

Server-side processing - empty return

April 7, 2020, 5:54 pm
$
0
0

GOOD PERSONAL EVENING, SOMEONE UNDERSTANDS ANYTHING OF THE PLUGIN DATATABLE JQUERY, MORE SPECIFIC ABOUT SERVER-SIDE PROCESSING ??? I AM LISTING WITH THIS PLUGIN AND I USE PHP AND JSON. EVERYTHING WORKS, BUT WHEN THE SEARCH RETURNS EMPTY FROM AN ERROR. CAN SOMEONE HELP ME ???

$(document).ready(function(){
$('#gride').DataTable({
"paging" : true,
"lengthChange": false,
"searching" : true,
"ordering" : true,
"order": [[ 4, "desc" ]],
"info" : true,
"autoWidth" : true,
"pageLength": 50,
"processing": true,
"serverSide": true,
"serverMethod": "post",
"ajax": {
"url":"atendimento_procura.php"
},
"error": {
system: "Ocorreu um erro, contate o administrador do sistema"
},
"columnDefs": [
{ orderable: false,
targets: "no-sort"
}],
"columns": [
{ "data": "id" },
{ "data": "destinatario" },
{ "data": "assunto" },
{ "data": "mensagem" },
{ "data": "dataAdd" },
{ "data": "dataAlt" },
{ "data": "novo" },
{ "data": "retorno" },
{ "data": "acao" }
]
});
});

↧
↧

default params doesn't sent

April 7, 2020, 6:33 pm
$
0
0

Hi

I am new to DataTable and JQuery JavaScript world.

I am using data table with server side processing. I understood that by default data table sends a few params to the server (draw, start, length) but the values of this params are 0 or null, sorry for my bad english is not my mother language.

Dataload (this is how i try to get the value from request)

int start = Convert.ToInt32(Request.Params["start"]);
int length = Convert.ToInt32(Request.Params["length"]);
string searchvalue = Request["search[value]"];

JSON

    $('#Contenido').DataTable({
        processing: true,
        serverSide: true,
        filter: false,
        orderMulti: false,
        lengthChange: false,        
        pageLength: 15,
        ajax: {
            url: _raiz + '/cuenta/DatosCuenta',
            type: "POST",
        },
        "columns": [
            { "data": "Id", "name": "Id", "autoWidth": true },
            { "data": "Codigo", "name": "Codigo", "autoWidth": true },
            { "data": "DescripcionCuenta", "name": "DescripcionCuenta" },
            { "data": "Catalogo", "name": "Catalogo" },
            { "data": "CuentaVinculada", "name": "CuentaVinculada" },
            { "data": "ValidoDesde", "name": "ValidoDesde" },
            { "data": "ValidoHasta", "name": "ValidoHasta" },
            { "data": "Vigente", "name": "Vigente" },
        ]
    });
↧

How to use datePicker in Column Filter ?

April 1, 2020, 7:02 am
$
0
0

I want to use dataPicker for only one column in Column Filter since one column has dates in it.

tried this.,

<script>
$( function() {
 $( "#example1 tfoot th:nth-child(0)".datepicker();
} );    
</script>
 
<script>
    $(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example1 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
  
    // DataTable
    var table = $('#example1').DataTable();
  
    // Apply the search
    table.columns().every( function () {
        var that = this;
  
        $( 'input', this.footer() ).on( 'keyup change clear', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
 </script>

but nothing worked. Screenshot added for reference too.

↧
Search

Error al cargar xscroll

April 7, 2020, 7:42 pm
$
0
0

Tengo el siguiente código , pero cuado carga por primera vez la página no me desplega el xScroll y las columnas no se alinean con los datos , debo interactuar con la tabla para que todo funcione y muestre el xScroll. El codigo es:

$(document).ready(function() {

$('#example').DataTable({

    "scrollX": true,
    "sScrollX": "100%",
    "scrollY": "50vh",


    language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Entradas",
        "infoEmpty": "Mostrando 0 to 0 of 0 Entradas",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Entradas",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    },

    initComplete: function() {
        this.api().columns().every(function() {
            var column = this;
            var select = $('<select><option value=""></option></select>')
                .appendTo($(column.header()))
                .on('change', function() {
                    var val = $.fn.dataTable.util.escapeRegex(
                        $(this).val()
                    );

                    column
                        .search(val ? '^' + val + '$' : '', true, false)
                        .draw();
                });
            $(select).click(function(e) {
                e.stopPropagation();
            });
            column.data().unique().sort().each(function(d, j) {
                select.append('<option value="' + d + '">' + d + '</option>')
            });
        });

    }


});

});

Asi es como se ve la primera vez:

Y asi cambia cuando interactuo con ella:

↧

Avoid push columns to the right when column has a long text

April 7, 2020, 7:49 pm
$
0
0

Hi everyone!

Does anyone know how to dynamically avoid pushing the columns to the right if one the columns on the left has a very long text?

Is it possible to dynamically show the column text only until the column border?

Perhaps dynamically cut the contents of the column until the border limit and show a tool tip if you hover over the column?

Perhaps dynamically show "..." at the end of column just before it touches the border to show that there is more information in the column?

Any other ideas?

Thank you very much!

Regards,
Alex

↧
↧

ajax.reload()

April 6, 2020, 10:38 pm
$
0
0

ajax.reload() when the form is open resets the current field "select2" values to the default values

↧

Copy to Clipboard on Bootstrap Modal

April 7, 2020, 9:49 pm
$
0
0

Hi, my Copy and Excel buttons work perfectly on a single webpage however when using a Bootstrap Modal and datatable, the Copy button doesn't work (the copy initialize modal is also hidden) probably because of the Bootstrap modal. The excel button works and will download the data. What can I do to get the Copy button to work?

Thank you,
Paul M

↧

Can we initialize datatable in success property of ajax?

April 3, 2020, 8:01 pm
↧
Viewing all 82259 articles
Browse latest View live
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>