jqXDatatable column Dynamically reload and Change issue - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: datatable plugin, javascript datatable

This topic contains 14 replies, has 3 voices, and was last updated by Peter Stoev 10 years, 7 months ago.

Viewing 15 posts - 1 through 15 (of 15 total)

Author

jqXDatatable column Dynamically reload and Change issue Posts

May 5, 2014 at 6:30 am jqXDatatable column Dynamically reload and Change issue #53915

alpesh

Participant

Hello,

We are using below code to load dynamically dataFields and columns load using ajax.but button click event we need to load new data fields and columns.

               var source =
					{
						dataFields: dfields,
						datatype: "json",
						id: 'id',
						url: url
					};
                     var dataAdapter = new $.jqx.dataAdapter(source)
                   $("#table").jqxDataTable(
                    {
                        width: 1200,
                        source: dataAdapter,
                        pageable: true,
                        pagerButtonsCount: 10,
                        columnsResize: true,
                        sortable: true,
                        altrows: true,
                        editable: false,
                        theme:theme,
                        columns:dcols
                   };

Now on search button click we are retrieving different data Fields and columns with below code.
` $(‘#search’).click(function(e) {
$(“#table”).jqxDataTable(‘clear’);
var updatedfilterColumn=getFilterColumns();
var updatedSource =
{
dataFields: updatedfilterColumn[‘dfields’],
datatype: “json”,
id: ‘id’,
url: url
};
var updatedAdapter = new $.jqx.dataAdapter(updatedSource);
$(“#companyDeduction_listTable”).jqxDataTable(
{
source: updatedAdapter,
columns: updatedfilterColumn[‘dcols’]
});
};
`
Could you please help us for above issue ?

Thanks,
Alpesh

May 5, 2014 at 7:10 am jqXDatatable column Dynamically reload and Change issue #53923

Peter Stoev

Keymaster

Hi Alpesh,

If you would like someone to test your scenario, then please provide a complete sample which we would be able to run locally. Like that one: http://jsfiddle.net/jqwidgets/dE5pk/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 5, 2014 at 8:24 am jqXDatatable column Dynamically reload and Change issue #53936

alpesh

Participant

Thanks Peter.

Could you please check below test code run it your local and let us know ?

<!DOCTYPE html>
<html lang="en">
    <head> 
        <title>Table</title> 
        <link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>

        <script type="text/javascript">
            var that = this;
            $(document).ready( function() {
                var data = new Array();
           
                var firstNames = [
                    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"];

                var lastNames = [
                    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"];

                var productNames = [
                    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"];

                var priceValues = [
                    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"];

                for (var i = 0; i < 200; i++) {
                    var row = {};
                    var productindex = Math.floor(Math.random() * productNames.length);
                    var price = parseFloat(priceValues[productindex]);
                    var quantity = 1 + Math.round(Math.random() * 10);

                    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                    row["productname"] = productNames[productindex];
                    row["price"] = price;
                    row["quantity"] = quantity;
                    row["total"] = price * quantity;

                    data[i] = row;
                }

                var source = {
                    localData: data,
                    dataType: "array",
                    dataFields: [{
                            name: 'firstname',
                            type: 'string'
                        }, {
                            name: 'lastname',
                            type: 'string'
                        }, {
                            name: 'productname',
                            type: 'string'
                        }, {
                            name: 'quantity',
                            type: 'number'
                        }, {
                            name: 'total',
                            type: 'number'
                        }]
                };

                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#table").jqxDataTable({
                    width: 670,
                    pageable: true,
                    theme: 'energyblue',
                    editable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    columnsResize: true,
                    columns: [{
                            text: 'Name',
                            dataField: 'firstname',
                            width: 100
                        }, {
                            text: 'Last Name',
                            dataField: 'lastname',
                            width: 100
                        }, {
                            text: 'Product',
                            editable: false,
                            dataField: 'productname',
                            width: 180
                        }, {
                            text: 'Quantity',
                            dataField: 'quantity',
                            width: 80,
                            cellsAlign: 'right',
                            align: 'right'
                        }, {
                            text: 'Total',
                            dataField: 'total',
                            cellsAlign: 'right',
                            align: 'right',
                            cellsFormat: 'c2'
                        }]
                });
                
                $('#saveSearch').click(function(e) {
                          var source = {
                        localData: data,
                        dataType: "array",
                        dataFields: [{
                                name: 'firstname',
                                type: 'string'
                            }, {
                                name: 'price',
                                type: 'number'
                            }
                        ]
                };

                var dataAdapter = new $.jqx.dataAdapter(source);

                $("#table").jqxDataTable({
                    width: 670,
                    pageable: true,
                    theme: 'energyblue',
                    editable: true,
                    pagerButtonsCount: 10,
                    source: dataAdapter,
                    columnsResize: true,
                    columns: [{
                            text: 'Name',
                            dataField: 'firstname',
                            width: 100
                        }, {
                            text: 'Unit Price',
                            dataField: 'price',
                            width: 90,
                            cellsAlign: 'right',
                            align: 'right',
                            cellsFormat: 'c2'
                        }
                    ]
                    });
                });
          
            });
        </script>
    </head>
    <body>
        <div id="table"></div>
        <br/>
        <input type="button" value="Search" name="saveSearch" id="saveSearch" class="jqxButton jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" role="button" aria-disabled="false" style="width: 80px;">
    </body>
</html>

Thanks
Alpesh

May 5, 2014 at 9:15 am jqXDatatable column Dynamically reload and Change issue #53942

Peter Stoev

Keymaster

Hi Alpesh,

What exactly is the issue? When I click the search button, I see 2 columns as it should. The first column is with 100px width, the second is with 90px width.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 5, 2014 at 9:45 am jqXDatatable column Dynamically reload and Change issue #53943

alpesh

Participant

Thanks Peter.

Yes,it’s working on local data.but We are facing that issue on retrieving server side data.When we click on search button that time we need to only two column.but table display previous column with empty data. we want remove empty column data.

Could you please help for how to remove empty column when we set server data Source on table ?

Thanks,
Alpesh

May 6, 2014 at 4:22 am jqXDatatable column Dynamically reload and Change issue #53998

alpesh

Participant

Hello Peter,

Could you please help us for above question’s answer ??

Thanks,
Alpesh

May 6, 2014 at 5:26 am jqXDatatable column Dynamically reload and Change issue #54000

Peter Stoev

Keymaster

Hi Alpesh,

Here’s a sample with remote JSON data.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id="Description">Data Binding to JSON data in jqxDataTable</title>
    <meta name="description" content="This sample demonstrates how we can bind jQWidgets DataTable widget to JSON Data by using jQWidgets DataAdapter plugin.">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var url = "../sampledata/beverages.txt";

            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'name', type: 'string' },
                    { name: 'type', type: 'string' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat', type: 'string' },
                    { name: 'protein', type: 'string' }
                ],
                id: 'id',
                url: url
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            $("#dataTable").jqxDataTable(
            {
                width: 850,
                pageable: true,
                pagerButtonsCount: 10,
                source: dataAdapter,
                columnsResize: true,
                columns: [
                  { text: 'Name', dataField: 'name', width: 300 },
                  { text: 'Beverage Type', dataField: 'type', width: 300 },
                  { text: 'Calories', dataField: 'calories', width: 180 },
                  { text: 'Total Fat', dataField: 'totalfat', width: 120 },
                  { text: 'Protein', dataField: 'protein' }
                ]
            });

            $('#saveSearch').click(function (e) {
                    var source = {
                        dataType: "json",
                        dataFields: [
                            { name: 'name', type: 'string' },
                            { name: 'type', type: 'string' }
                        ],
                        id: 'id',
                        url: url
                    };

                    var dataAdapter = new $.jqx.dataAdapter(source);

                    $("#dataTable").jqxDataTable(
                   {
                       columns: [
                         { text: 'Name', dataField: 'name', width: 300 },
                         { text: 'Beverage Type', dataField: 'type', width: 300 }
                       ]
                   });
                    $("#dataTable").jqxDataTable(
                   {
                       source: dataAdapter
                   });
          
            });
        });
    </script>
</head>
<body class='default'>
    <div id="dataTable"></div>
    <input type="button" value="Search" name="saveSearch" id="saveSearch" class="jqxButton jqx-rc-all jqx-button jqx-widget jqx-fill-state-normal" role="button" aria-disabled="false" style="width: 80px;">
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 6, 2014 at 5:43 am jqXDatatable column Dynamically reload and Change issue #54004

alpesh

Participant

Hello Peter,

We are getting error below like error.When we click on search button.
Uncaught TypeError: Cannot read property 'length' of undefined

Thanks,
Alpesh

May 6, 2014 at 6:02 am jqXDatatable column Dynamically reload and Change issue #54009

Peter Stoev

Keymaster

Hi Alpesh,

If you wish, try the sample I sent you. You won’t get any error with it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 6, 2014 at 6:09 am jqXDatatable column Dynamically reload and Change issue #54010

alpesh

Participant

Thanks for reply Peter.

I have tried with above example in my local.but error getting on Search button click.below error showing on chrome browser console.
Uncaught TypeError: Cannot read property 'length' of undefined
Could you please help us ?

Thanks,
Alpesh

May 6, 2014 at 6:29 am jqXDatatable column Dynamically reload and Change issue #54013

Peter Stoev

Keymaster

Hi Alpesh,

Sorry, but I can’t help because I cannot reproduce that.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 6, 2014 at 6:40 am jqXDatatable column Dynamically reload and Change issue #54017

alpesh

Participant

Thanks Peter,

This is my last question.
Right now i am using version ‘jQWidgets v3.1.0’
Is there any old version problem for below error?
Uncaught TypeError: Cannot read property 'length' of undefined

Thanks,
Alpesh

May 6, 2014 at 7:30 am jqXDatatable column Dynamically reload and Change issue #54021

Peter Stoev

Keymaster

Hi Alpesh,

May be that is the problem, because the current version is 3.2.2.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

May 16, 2014 at 7:15 pm jqXDatatable column Dynamically reload and Change issue #54576

kreagk

Participant

I’m also seeing this issue when dynamically changing the source on a treegrid version 3.2.2. It does not occur on the first load, only subsequent loads and does not occur if you set the dataAdapter’s property async = false. As a workaround, I just put a try…catch statement around the call to load the data as the treegrid was loading correctly despite throwing an error.

May 16, 2014 at 7:43 pm jqXDatatable column Dynamically reload and Change issue #54578

Peter Stoev

Keymaster

Hi kreagk,

If you experience an issue, then you may provide a sample which demonstrates your scenario.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

Author

Posts

Viewing 15 posts - 1 through 15 (of 15 total)

You must be logged in to reply to this topic.