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

JQuery + Ajax in Flask not working

$
0
0

Hello all.

I'm trying to populate my first table using Ajax, so excuse my lack of knowledge.
I have the following HTML:

<div class="x_content">
                <table id="exemplo" name="exemplo" class="display">
                    <thead>
                        <tr>
                            <th>Data</th>
                            <th>Cred</th>
                            <th>Deb</th>
                            <th>Dsc</th>
                            <th>Valor</th>
                        </tr>
                    </thead>
                </table>
            </div>

And right bellow it, I have the following script:

<script>
$(document).ready(function() {
    $('#exemplo').DataTable( {
        "ajax": "files/data.json",
        "columns": [
            { "data": "data" },
            { "data": "cred" },
            { "data": "deb" },
            { "data": "dsc" },
            { "data": "valor" }
        ]
    } );
} );
</script>

My JSON file looks something like this:

[
    {
        "data": null,
        "dsc": null,
        "valor": null,
        "deb": null,
        "cred": null,
        "ID": 1
    },
    {
        "data": 20171019,
        "dsc": "Descricao do evento sem caracteres especiais.",
        "valor": 320.0,
        "deb": "Nao Classificado",
        "cred": "Itau",
        "ID": 2
    }]

I'm loading all the required scrips, but I just can't seem to get something on the table.
Does anybody have any idea of what can be happening?

My HTML is on app/templates/ledger.html and the file is in files/data.json.

Thanks a lot


ASP.NET使用ajax请求ashx实现Datatables分页

$
0
0

如何实现ASP.NET使用ajax请求ashx实现Datatables分页,ajax请求ashx需要手动传参吗?传回来的json数据如何处理

server side scripting for the postgres(psql) is not working?

$
0
0

I tried using the server side scripting code from the link https://datatables.net/examples/data_sources/server_side
this code works only for the mysql, it does not work for postgres database.
Is there any other sample code which supports the postgres database?
ssp.class file which is must for server-side scripting would be much appreciated if someone can share me the one.
Thanks
Koka

presubmite

$
0
0

$.ajax({
type: "GET",
data: {"domain":domain.val()},
dataType: "json",
url: '/example/',
cache: false,
timeout:30000,
success: function(returnData) {
console.log(returnData)
console.log("yes")
// domain.error( 'Domain must be valid URL' );
}
});

if ( this.inError() ) {
return false;
}

i m using this in presubmite evevnt but this.inError() execute first before ajax sucess what do ?

initComplete function not working in .dataTable

$
0
0

Hi, Im trying to add multiple select filter using initComplete function as from this example https://datatables.net/examples/api/multi_filter_select.html, but the code is not executed at all when i run my program, its not throwing any error as well. even alert or console.log is not displaying. What is the issue exactly?

Here's my code

content_table = $('#project-content-datatable').dataTable({
        dom: 'Blfrtip',
        JQueryUI: true,
        bPaginate: false,
        sScrollX: "100%",
        scrollY: '200vh',
        scrollCollapse: true,
        paging: false,
        destroy: true,
     initComplete: function () {
            alert( 'DataTables has finished its initialisation.' );
            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();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        },

        columnDefs: [
            {width: 1, targets: 0},
            {width: 1, targets: 1},
        ],
        responsive: false,
        select: true,
        buttons: getDataTableButtons(),
        ajax: {
            url: content_path,
            dataSrc: ''
        },
        columns: [
            {"data": "id", "class": "content_id id_padding-right ", "width": "5px"},
            {
                "data": "thumb",
                "class": "preview_padding-right ",
                "visible": false,
                "render": function (data, type, row) {
                    return `<a href=` + data + ` data-fancybox> <img onerror="this.src='/media/dashboard/default/photo.png'" src=` + data + ` width="80" height="45"> </a>`;
                }
            },
            {"data": "parent", "visible": false},
            {"data": "name", "class": "content_name", "visible": true},
            {"data": "description", "class": "content_description", "visible": true},
            {
                "data": "category", "class": "", "visible": true, "render": function (data, type, row) {
                if (data != null) {
                    return data.name;
                }
                else {
                    return 'None';
                }
            }
            },
            {"data": "creation_time", "visible": false},
            {
                "data": null, "class": "content_duration ", "visible": true, "render": function (data, type, row) {

                // return get_duration(data);
                return 0;
            }
            }
        ]
    });

but if seperate the initComplete .DataTable function it will work. below is the code

$('#project-content-datatable').DataTable( {
        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();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    });

It append the select field to each of the column header , BUT it cannot find any column data for it to append the into the field.
can anyone help me with this? any help is much appreciated

Uncaught TypeError: Cannot read property 'length' of undefined

$
0
0

I'm getting that error while i'm using datatables and i'm getting the data from database with ajax code
Uncaught TypeError: Cannot read property 'length' of undefined
at Ia (jquery.dataTables.min.js:24)
at HTMLTableRowElement.<anonymous> (jquery.dataTables.min.js:17)
at jQuery-2.1.4.min.js:2
at Function.map (jQuery-2.1.4.min.js:2)
at n.fn.init.map (jQuery-2.1.4.min.js:2)
at na (jquery.dataTables.min.js:16)
at e (jquery.dataTables.min.js:92)
at HTMLTableElement.<anonymous> (jquery.dataTables.min.js:93)
at Function.each (jQuery-2.1.4.min.js:2)
at n.fn.init.each (jQuery-2.1.4.min.js:2)

## the code is included in the attached file

Sums of several columns at the footer of a table

$
0
0

Hello,

I tried to have sums of several columns at the footer of my table. I tried differents options but without success.

I tried this : https://datatables.net/examples/advanced_init/footer_callback.html
but I can only have the total of one column.

I tried this: https://datatables.net/examples/plug-ins/api.html
I have all the column like I want with the sum of the sorting but there are buttons. Is there a solution to have this method with sum in the footer of columns?

I tried others thinks too but nothing good for what I want I'm a beginner and Javascript is very difficult for my at the moment.

Thanks for advance.

Delph

Uncaught TypeError: Cannot set property '$' of undefined

$
0
0

Hello,

I wanted to use DataTables in my wordpress theme but it doesn't work. I get the error above...

I installed DataTables with npm. My main.js looks like this:

var $ = jQuery;
var dt = require("datatables.net")();


$(document).ready(function() {
    $(".datatable").DataTable();
});

Upgrading from 1.10.15 to 1.10.18 breaks (multiple column) smart filtering?

$
0
0

Hey all,

when I wanted to upgrade from the above mentioned versions, it broke my "Search all columns"-function. I've both tried the search-API and the (apparently legacy) fnFilter with the same problem. When reverting back to the old version it works again. The code I am using is:

$(tableID).DataTable().search(searchValue).draw();
--- or ---
$(tableID).DataTable().search(searchValue, false, true).draw(); // Regex = false, Smart = true
--- or ---
$(tableID).dataTable().fnFilter(searchValue);

What I wanted to achieve is the same as this example when the user wants to search for "Airi Satou Accountant". In my local case, "Airi Satou " is found, but when searching for "Airi Satou A" there are no entries found anymore.

At this rate I am forced to downgrade to 1.10.15 again.

With best regards.

Load Array JSON into data Tables

$
0
0

Hello, i have a soap web service, it's using xml version. and i've tried to parse with json encode to be json format. Then i want to load json format into data tables server side.

this is my cont in laravel

public function datatablesStatusTKI(Request $request){  
            $this->validate($request, [
            'nama' => 'required',
            'negara' => 'required',
            'pencarian'=>'required'
            ]);

            $count = Pengaturan::where('key', 'visitor')        
            ->first();
            $array=array_map('intval', str_split($count->value));

            $kategori = $request->input("pencarian");
            $nama = $request->input("nama");
            $negara = $request->input("negara");
            $pages = $request->get("pageby");

            $soapClient = new SoapClient("http://interop.bnp2tki.go.id/perwakilanWS/wsdl"); 
            $param;     
            if($kategori=="2"){ //search by paspor
                $param = array( 
                'user_id'=>'kjri_jed', 
                'user_pass'=>'123',
                'paspor'=>$nama         
                );

                $error = 0; 
                try { 
                    $info = $soapClient->__call("ws_view_tkibypaspor", $param);         
                    if($info!="notfound"){                  
                        $informasi = preg_replace('/&(?!#?[a-z0-9]+;)/', '&amp;', $info);
                        $xml = new SimpleXMLElement($informasi);
                        $data = $xml->tki_data;
                        $pagess = $xml->total_page;
                        $json = json_encode($data);
                        return $json;

                        }else{
                        $data=$info;
                        return $data;           
                    }
                    } catch (SoapFault $fault) { 
                    return view('page.search-tki', compact('data', 'array'));
                } 

                }else{ //by nama
                $param = array( 
                'user_id'=>'kjri_jed', 
                'user_pass'=>'123',
                'nama'=>$nama,
                'negara'=>$negara,
                'page'=>$pages          
                );
                $error = 0; 

                try { 
                    $info = $soapClient->__call("ws_view_tkibyname", $param); 
                    if($info!="notfound"){
                        $informasi = preg_replace('/&(?!#?[a-z0-9]+;)/', '&amp;', $info);
                        $xml = new SimpleXMLElement($informasi);
                        $data = $xml->tki_data;
                        $pagess = $xml->total_page;
                        $json = json_encode($data);
                        return $json;
                        //return Datatables::of($json)->make(true);
                        //return Datatables::eloquent($data)->make(true);

                        }else{
                        $data=$info;
                        return $data;               
                    }
                    } catch (SoapFault $fault) { 
                    return view('page.search-tki', compact('data', 'array'));
                }   
            }       
        }

And its my java script data tables

    <script>
        //alert(""+"{{ $nama }}");
        $(function () {

            var ObjDt = $(".bnp-table").DataTable({
                processing: true,
                serverSide: true,
                ajax: {
                    url: "{{ url('/cekstatustki')}}",
                    dataType: 'json',
                    type: "POST",
                    "data": function ( d ) {
                        d.pencarian = "{{ $kategori }}";
                        d.nama = "{{ $nama }}";
                        d.negara = "{{ $negara }}";
                        d.page = "1";
                        // d.custom = $('#myInput').val();
                        // etc
                    }
                },
                columns: [
                {data: 'id', name: 'id'},
                {data: 'TKI_TKINAME', name: 'TKI_TKINAME'},
                {data: 'TKI_TKICITYDESC', name: 'TKI_TKICITYDESC'},
                {data: 'TKI_NEGARADESC', name: 'TKI_NEGARADESC'},
                {data: 'TKI_PJTKIDESC', name: 'TKI_PJTKIDESC'},
                {data: 'TKI_PJTKADESC', name: 'TKI_PJTKADESC'},
                {data: 'TKI_STATUS', name: 'TKI_STATUS'},
                {data: 'TKI_TANGGAL', name: 'TKI_TANGGAL', searchable: false},
                ],

                "oLanguage": {
                    "sProcessing":   "Sedang memproses...",
                    "sLengthMenu":   "Tampilkan _MENU_ entri",
                    "sZeroRecords":  "Tidak ditemukan data yang sesuai",
                    "sInfo":         "Menampilkan _START_ sampai _END_ dari _TOTAL_ entri",
                    "sInfoEmpty":    "Menampilkan 0 sampai 0 dari 0 entri",
                    "sInfoFiltered": "(disaring dari _MAX_ entri keseluruhan)",
                    "sInfoPostFix":  "",
                    "sSearch":       "Cari:",
                    "sUrl":          "",
                    "oPaginate": {
                        "sFirst":    "Pertama",
                        "sPrevious": "Sebelumnya",
                        "sNext":     "Selanjutnya",
                        "sLast":     "Terakhir"
                    }
                },
                "rowReorder": {
                    "selector": 'td:nth-child(2)'
                },
                "responsive": true
            } );


             ObjDt.on( 'search.dt order.dt page.dt', function () {
                var info = ObjDt.page.info();
                var length = ObjDt.column( 0 ).data().length;
                ObjDt.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                    cell.innerHTML = (info.page)*length+i+1;
                });
            }).draw();
            $.fn.dataTable.ext.errMode = 'throw'; 
        });
    </script>

Can any one help me to load array in data tables? please :smile:
I'm a newbie using data tables, and the url in ajax direct to function that i have shared.

Datatable with checkbox column and option to select or deselect all

$
0
0

Hi all,

Is there anyone who have implemented a DataTable with a checkbox column and then when you tick the checkbox on the header it select or deselect all rows in the table?

I've seen quite a few samples including the documentation, but, I was not able to make it working.

It'd be very nice if anyone can post a working sample or point me to the right direction on how to accomplish this.

Also, my last column is a operation column for CRUD operations.

This is what I have done.

$.ajax({
                    url: "http://localhost:52800/api/sample",
                    method: "GET",
                    contentType: 'application/json'
                }).done(function (data) {
                    $('#tblTable').dataTable({
                        lengthChange: false,
                        pageLength: 10,
                        deferRender: true,
                        dom: 'Bfrtip',
                        order: [[1, 'asc']],
                        "aaData": data,
                        "columns": [
                            {
                                targets: 0,
                                data: null,
                                className: 'text-center',
                                searchable: false,
                                orderable: false,
                                render: function (data, type, full, meta) {
                                    return '<input type="checkbox" id="check_' + data.id + '" class="check" name="check" value="' + data.id + '">';
                                },
                                width: "5%"
                            },
                            {
                                data: "email",
                                width: "50%"
                            },
                            {
                                data: "name",
                                width: "30%"
                            },
                            {
                                data: null,
                                className: "text-center",
                                defaultContent: "<a href='#' class='_edit'><span class='glyphicon glyphicon-edit'></a>&nbsp;&nbsp;&nbsp;" +
                                    "<a href='#' class= '_details'><span class='glyphicon glyphicon-eye-open'></a>&nbsp;&nbsp;&nbsp;" +
                                    "<a href='#' class= '_delete'><span class='glyphicon glyphicon-trash'></a>&nbsp;&nbsp;&nbsp;" +
                                    "<a href='#' class= '_invite'><span class='glyphicon glyphicon-envelope'></a>",
                                orderable: false
                            }
                        ],
                        buttons: [
                            {
                                text: 'Create New',
                                action: function () {

                                    let html;
                                    $.get('form.html', function (data) {
                                        html = data.replace("StateControlsPlaceHolder", "value='new'");
                                    }).done(function () {
                                        $('#ActionContainer').html(html);
                                    });
                                }
                            },
                            {
                                text: 'Invite',
                                action: function () {
                                    alert("Invite multiple users at the same time");
                                }
                            },
                            {
                                text: 'Delete',
                                action: function () {
                                    alert("Delete multiple users at the same time");
                                }
                            }
                        ]
                    });
                });

Thank you very much!

datatables with webpack $.fn.dataTable undefined

$
0
0

Hi,

I am trying to migrate my project to Symfony 4. To do so I want to use webpack/encore instead of static assets. I am unsing the datatables plugin and now I am trying to make it work. After requiring the module I cannot use $.fn.dataTables.

TypeError: $.fn.dataTable is undefined

The module is imported via require('datatables.net');
I also tried to use AMD: require('datatables.net')(window, $); this resulted in TypeError: this is undefined (jquery.dataTables.js:132).

Writing the require output to $.fn.dataTable also doesn't work.
dataTable = require('datatables.net'); $.fn.dataTable = dataTable;

Of course it's no longer undefined but it also doensn't work because the module exports DataTable and not $.fn.dataTable. So the resulting error when unsing it is TypeError: $(...).DataTable is not a function

I would appreciate your help to finally make this work like I would use static assets.

How to filter on a date column with daterangepicker

$
0
0

Hi,

I attempt to make this function to work with just one data search field, my search field contain the start and the end values (with daterangepicker).
So I need to past the two values to the same search for the column.

This is working if I past just one value --> datatables.columns(7).search(startdate);
But what I need is sommething like : datatables.columns(7).search(startdate,enddate);
I have checked to$.fn.dataTable.ext.search.push but I don't understant how to make it workig.

Can you help me?
Best regards.

//Filter the datatable on the datepicker apply event
$('#idReportrange').on('apply.daterangepicker', function(ev, picker) 
{
    startdate=picker.startDate.format('YYYY-MM-DD');
    enddate=picker.endDate.format('YYYY-MM-DD');
    $('#idReportrange').val(startdate + ' - ' + enddate);

    alert(startdate+" "+enddate);

    datatables.columns(7).search(startdate);
    datatables.draw();

});

Multiple tables with same data but different search filters set on each table

$
0
0

I have six tables on my website. They all use the same data set. Therefore I used the Multiple Tables Example. Which works great.

But now I would like to use different search filters for each table. How can I achieve this?

Memory leak in Datatabel

$
0
0

We are using datatable in .net and observed memory leak, as when application loaded for first time it take some amount of memory, and if we refresh the page, memory consumption increase by x MB (initial memory + X MB) this keeps incarcerating with every refresh.At a point it reach to a limit which 32 bit browser can not support. Need urgent help form member for best practice to avoid this memory leak (memory eat up)

here is code snippet we are using. Column are being dynamically added/deleted based on configuration.

$jq.ajax({
type: "POST",
url: "Ajax/WorkListAjax.aspx/GetInboxGrid",
contentType: "application/json; charset=utf-8",
async: true,
dataType: "json",
timeout: 0,
headers: { Connection: 'keep-alive' },
data: JSON.stringify({
"viewId": viewId
}),
success: function (response) {
var result = response.d;

        if (result.IsError) {
            CustomConfirm("dialog-confirm", result.Message, "Inbox");
            $jq("#inbox_results_loading").fadeOut(1);
        }
        else if (result.Data != null) {
            var tableHeaders = '';
            var columns = [];
            var excludeFilters = [];
            var bulkOperation = result.Data.BulkOperation;
            $jq.each(result.Data.Columns, function (i, val) {

                if (val.HiddenColumn != "Y") {
                    tableHeaders += "<th>" + val.DisplayName + "</th>";
                    var col = { 'title': val.DisplayName, 'data': val.DataColumnName.toLowerCase() };
                    columns.push(col);
                }
                if (val.FilterColumn >= 0) {
                    excludeFilters.push(val.FilterColumn);
                }
            });
            var data = $jq.parseJSON(result.Data.Results);
            var json = $jq.parseJSON(result.Data.WorkListJQStructure);
            if (result.Data.Xtrattribute) {
                validationjson = $jq.parseJSON(result.Data.Xtrattribute);
                validationInboxJson = validationjson;
            }
            else {
                validationjson = "";
                validationInboxJson = "";
            }

            delete json["bAutoWidth"];

            json.data = data;
            json.columns = columns;
            json.oColumnFilterWidgets.aiExclude = excludeFilters;
            DisplayExportOptions(json.buttons, 'inbox_results', 'ulInboxExportTo');

Datatable memory leakage

$
0
0

We are using datatabel.net in our asp.net application. during testing we noticed that it consume a lot of memory as described.
on initial load it consume some amount of memory, and as soon as we hit refresh memory consumption increased by X MB (i.e. initial memory + X MB) this keep increase increasing on each refresh. need help to minimize this memory leakage on datatable. Attaching here a piece of code for reference. Column in datatable are dynamically being generated based on configuration that which column need to be displayed/hidden.

$jq.ajax({
type: "POST",
url: "Ajax/WorkListAjax.aspx/GetInboxGrid",
contentType: "application/json; charset=utf-8",
async: true,
dataType: "json",
timeout: 0,
headers: { Connection: 'keep-alive' },
data: JSON.stringify({
"viewId": viewId
}),
success: function (response) {
var result = response.d;

        if (result.IsError) {
            CustomConfirm("dialog-confirm", result.Message, "Inbox");
            $jq("#inbox_results_loading").fadeOut(1);
        }
        else if (result.Data != null) {
            var tableHeaders = '';
            var columns = [];
            var excludeFilters = [];
            var bulkOperation = result.Data.BulkOperation;
            $jq.each(result.Data.Columns, function (i, val) {

                if (val.HiddenColumn != "Y") {
                    tableHeaders += "<th>" + val.DisplayName + "</th>";
                    var col = { 'title': val.DisplayName, 'data': val.DataColumnName.toLowerCase() };
                    columns.push(col);
                }
                if (val.FilterColumn >= 0) {
                    excludeFilters.push(val.FilterColumn);
                }
            });
            var data = $jq.parseJSON(result.Data.Results);
            var json = $jq.parseJSON(result.Data.WorkListJQStructure);
            if (result.Data.Xtrattribute) {
                validationjson = $jq.parseJSON(result.Data.Xtrattribute);
                validationInboxJson = validationjson;
            }
            else {
                validationjson = "";
                validationInboxJson = "";
            }


            delete json["bAutoWidth"];


            json.data = data;
            json.columns = columns;
            json.oColumnFilterWidgets.aiExclude = excludeFilters;
            DisplayExportOptions(json.buttons, 'inbox_results', 'ulInboxExportTo');

changing cell color using the API ?

$
0
0

I'd like to set the background color of a cell based on various factors but I can't figure how to do that using the api - any advice appreciated,
thx,
Gav

Datatable memory leak under both IE and Chrome

$
0
0

Hi,

The application, I am developing, is using Datatable which binds the data and event dynamically. When monitored from Developer tool in internet explorer one can see an increase in the total memory usage after each successful server response (increases approx. 29-35 MB in total memory). I tried solutions to free the DOM objects and datatbles, using jquery functions like .remove(), .empty(), .detach(), and .destroy() but none stops the memory increase. Even destroying the datatable before a new request doesn't help. I also tried to delete the variables in the javascript, tried setting the variables to null, and tried setting the event bind to the datatable .off() nothing helps.

The code snippet from the js file is as follows:

    function LoadData(isReset) {
        var viewId = $jq('#ddlCategory').val();
        if (viewId == 'undefined' || viewId == null || viewId == '') {
            return false;
        }

        try {
            //Clear the variables and remove the datatable
            ClearFunction();

            dtAjaxCall = $jq.ajax({
                type: "POST",
                url: "Ajax/WorkListAjax.aspx/GetData",
                deferRender: true,
                contentType: "application/json; charset=utf-8",
                async: true,
                dataType: "json",
                timeout: 0,
                headers: { Connection: 'keep-alive' },
                data: JSON.stringify({
                    "viewId": viewId
                }),
                success: function (response) {

                    //Clear the variables and remove the datatable
            ClearFunction();

                    result = response.d;

                    if (result.IsError) {
                        CustomConfirm("dialog-confirm", result.Message, "");
                    }
                    else if (result.Data != null) {

                        data01 = result.Data;
                        result.Data = null; //set the result.Data as null
                        tableHeaders = ''; //var to store Datatable headers
                        columns = []; //var to store Datatable columns
                        excludeFilters = [];//var to exclude the filters. 
                        bulkOperation = data01.BulkOperation; //var to store if bulk operation is required

                //Create the table header columns dynamically as configured in database
                        $jq.each(data01.Columns, function (i, val) {
                            if (val.HiddenColumn != "Y") {
                                tableHeaders += "<th>" + val.DisplayName + "</th>";
                                var col = { 'title': val.DisplayName, 'data': val.DataColumnName.toLowerCase() };
                                columns.push(col);
                            }
                            if (val.FilterColumn >= 0) {
                                excludeFilters.push(val.FilterColumn);
                            }
                        });

                        data = $jq.parseJSON(data01.Results); //result returned in ajax call
                        json = $jq.parseJSON(data01.WorkListJQStructure); //datatable configuration returned in ajax call

                        delete json["bAutoWidth"];

                        json.data = data;
                        json.columns = columns;

                        DisplayExportOptions(json.buttons, 'resultsTable', 'ulExportTo');

               //Add checkbox for each row in the data table
                        dtColumnDefinition = function (data, type, full, meta) {
                            return '<input type="checkbox" data-id="' + data + '">';
                        }

                        json.aoColumnDefs[0].render = dtColumnDefinition;

                //Ajax call to save the datatable state state
                        dtSaveState = function (settings, data) {
                            $jq.ajax({
                                type: "POST",
                                url: "Ajax/WorkListAjax.aspx/SaveState",
                                contentType: "application/json; charset=utf-8",
                                async: true,
                                dataType: "json",
                                data: JSON.stringify({ "viewId": viewId, json: data }),
                                "success": function () {
                                },
                                error: function (request, status, error) {
                                    CustomConfirm("dialog-confirm", "An error occurred while processing your current request. Please try again", "");
                                }
                            });
                        }

                //Try destroying the existing instance
                        if ($jq.fn.DataTable.isDataTable('#resultsTable')) {
                            $jq('#resultsTable').DataTable().destroy();
                        }

                        //Make the body empty
                        $jq('#resultsTable tbody').empty();
                        //Remove the datatable
                        $jq("#resultsTable").dataTable().remove();

                        //Datatable save state function call
                        json.stateSaveCallback = dtSaveState;

                        //Empty from the parent table of the datatable
                        $jq("#resultsTable_display").empty();

                        //Create the datatable header dynamically and add to the parent table
                        $jq("#resultsTable_display").append('<table id="resultsTable" class="display" style="width:100%;white-space: nowrap;"><thead><tr>' + tableHeaders + '</tr></thead></table>');

                        //bind the json and data to the datatable
                        SearchTable = $jq("#resultsTable").DataTable(json).rows().invalidate().draw();

                        //Set the event off before
                        $jq("#resultsTable").off();
                        //Set the event
                        $jq('#resultsTable').on('length.dt', function (e, settings, len) {
                            //code to set the height dynamically...
                        });

                        $jq("#resultsTable_display .dataTables_scrollHeadInner").css("width", "100%");
                        $jq("#resultsTable_display .dataTables_scrollHeadInner .dataTable").css("width", "100%");

                        BulkOpr(bulkOperation, SearchTable);

                        //reset the columns after binding the data
                        SearchTable.columns.adjust();

                        DataTableName = '#resultsTable';

                        $jq('#resultsTable').on('page.dt', function () {
                            info = SearchTable.page.info();
                            customHeight = 0;
                            customHeight = UserDefinedFields.CustomPageHeight(info, 40);
                            $jq('#Parent').attr('style', 'min-height:' + customHeight + 'px;');
                        });

                        $jq("a").removeClass("dt-button");
                    }
                    //set the variables null
                    json = null;
                    data01 = null;
                    data = null;
                },
                error: function (request, status, error) {
                    //do nothing...
                }
            });

            return false;
        }
        finally {
            //Clear the variables...
        }
    }

    //----------------------------------------------
    //method to clear the variables and datatables
    function ClearFunction()
    {
        //make all variables null
        dtAjaxCall = null;
        resultSearchTable = null;
        DataTableName = null;
        info  = null;
        customHeight = null;
        cells = null;
        selected = null;
        cBox = null;
        clist = null;
        dtSaveState = null;
        result = null;
        data01 = null;
        tableHeaders = null;
        columns = null;
        excludeFilters = null;
        bulkOperation = null;
        data = null;
        json = null;
        dtColumnDefinition = null;

        //clear dom objects
        $jq("#resultsTable").dataTable().remove();
        $jq("#resultsTable_display").dataTable().empty();
    }

Please help!

Thanks!

Hiding element in row details (Server-side)

$
0
0

Hi, I have implemented this Ajax loaded row details https://datatables.net/blog/2017-03-31.
I would like to hide part of the row details and unhide it after click on a button. I tried to create function and add the button in the rows detail, but it's not working properly.

When I click on the button, it hides the div element I want, but when I open another row detail, the next button is showing/hiding the element in previous row.

This is my script:

function format (rowData) {
        var div = $('<div/>')
        .addClass( 'loading' )
        .text( 'Loading...' );

    $.ajax( {
        url: 'scripts/details.php',
        data: {
            name: rowData[0]
        },
        dataType: 'json',
        type: 'post',
        success: function ( json ) {
            console.log(json);
            var childTable = '<div id="rowdetails">';
            childTable = childTable.concat(
                '<div class="row rdstyle">' +
                '<button onclick="myFunction()">Click Me</button>' +
                '<div id="myDIV">' +
                'This is my DIV element.' +
               '</div>'
              ...
}


function myFunction() {
    var x = document.getElementById("myDIV");
    if (x.style.display === "none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}

and also an error is raised :Uncaught TypeError: Cannot read property '0' of undefined on line 9

Thank you

disable focus fields

$
0
0

I did not want, that the focus will set automatically on the first input field, if I open a create or edit windows. I tried it with the following code, but this did not work:

$( '#eventtable' ).on( 'click', 'tbody tr', function() {
        editor.create( this, {
            focus: null
        } );
        editor.edit( this, {
            focus: null
        } );
    } );

Has anyone some ideas what is wrong with my code?

Andreas

Viewing all 82294 articles
Browse latest View live


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