date format

suser

I populate data in jquery like this

```
$("#example").empty()

                if (re.length > 0) {
                    $("#example").append
                    ("<thead><tr><th>StartDate</th><th>EndDate</th></tr></thead>");

                    for (var i = 0; i < re.length; i++) {
                        if (re[i] !== null) {
                            $("#example").append("<tbody><tr><td>" +
                                re[i][0] + "</td><td>" +
                                re[i][1] + "</td></tr></tbody>");
                        }
                    }

                } var myTable;
                    debugger;

                    myTable = $('#example').DataTable({
                        "sPaginationType": "full_numbers",
                        data: result.d,
                        //columns: columnDefs,
                        dom: 'Bfrtip',
                        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }], // Needs button container
                        select: 'single',
                        responsive: true,
                        altEditor: true,     // Enable altEditor
                        buttons: [{
                            text: 'Add',
                            name: 'add'        // do not change name
                        },
                        {
                            extend: 'selected', // Bind to Selected row
                            text: 'Edit',
                            name: 'edit'        // do not change name
                        },
                        {
                            extend: 'selected', // Bind to Selected row
                            text: 'Delete',
                            name: 'delete'      // do not change name
                        }]

                    });

and this show result like this 

StartDate EndDate
/Date(1391194800000)/ /Date(1393613999000)/
```

but in my table column date is correctly formatted..

how i display correct date format do this

allan

You have two options - use a renderer to convert from the .NET date string to something readable, or modifier your server-side code to output the date in a readable format.

Allan

suser

output is readable format but this display in wrong format

suser

how i use this renderer

suser

ok i do this first i save
sdate= re[i][2];

then i call this like this

 dom: 'Bfrtip',
                            "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }], // Needs button container
                            select: 'single',
                            render: function (sdate, type, row) {
                                var dateSplit = sdate.split('-');
                                return type === "display" || type === "filter" ?
                                    dateSplit[1] +'-'+ dateSplit[2] +'-'+ dateSplit[0] :
                                    sdate;
                            },

but this not works

allan

sdate.split('-');

I'm not sure why you are splitting on a dash? Date(1391194800000) doesn't have a dash in it.

You'd need to write a function to convert the .NET date string to a readable format. I believe it is in milliseconds from 1st Jan 1900 - but you might want to check in the Microsoft documentation.

Allan

suser

but in .net static method date format is like
2014-02-01 00:00:00.000 start date
2014-02-28 23:59:59.000 end date"

in .net date format is correct problem occur in jquery

allan

You stated above your date is being returned from the server such as Date(1391194800000). If that is what the client-side is seeing, then it is that format that it would need to convert.

suser

@allan i mentioned in 2nd last comment that
"but in .net static method date format is like
2014-02-01 00:00:00.000 start date
2014-02-28 23:59:59.000 end date"

means from server side data is correctly formatted but when i try to display this data in datatable data format is like this Date(1391194800000)

suser

check this

and data in store procedure is like this

StartDate                            EndDate
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-02-01 00:00:00.000 2014-02-28 23:59:59.000
2014-03-23 00:00:00.000 2014-03-30 23:59:59.000
2014-03-23 00:00:00.000 2014-03-30 23:59:59.000

allan

Yes, that's because your database viewer is correctly interpreting the DateTime and showing it as a formatting string.

Have a look at the JSON data being returned from the server (see this tech note if you don't know how to do that). You will see that the Date(...) format is what DataTables is being given by the server. As I stated before, you need to either:

1. Render that on the client-side
2. Render it on the server-side

Allan

suser

ok means in there is problem is JSON string

suser

@allan ok i solve this but why there is so many empty rows on the starting

allan

Without a link to a test case showing the issue, I can only guess it is because that data that you are having it display contains empty rows. I'd need a test case to know for sure.

Allan

suser

ok check this
https://jsfiddle.net/wtnwgz09/7/

in this dropdown ie.. 10 rows, 20 rows etc is not working and also when i search data is not searching .

F12Magic

You have created 400 opening and closing TBODY tags and you didn't close the TABLE tag.
Change your code to make it a working datatable :

for(i=0;i<400;i++){
$('#tabledata').append('<tr><td> 1234 </td><td>normal</td> <td>90</td><td>sd</td></tr>' );
    }
$('#tabledata').append('</tbody></table>');

suser

like this?
https://jsfiddle.net/wtnwgz09/8/

but why this is mentioned "No data available in table"

and also show rows dropdown still not working

@allan @F12Magic

F12Magic

"No data available in table" means (in this case) that your table isn't correctly build and that datatables can't be correctly apllied to it.
The rows dropdown works, but can't be displayed because you use "scrollY": 100,
If you remove that, you'll see it works.

Here is a corrected fiddle: https://jsfiddle.net/wtnwgz09/10/
Please use that for future reference.

suser

hey Thanku for this
@F12Magic
but when i try in my code like this as same as in your js fiddle

 <script type="text/javascript">
        $(function () {
            $.ajax({
                type: "POST",
                url: "Maintenance.aspx/master_Services",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                success: function (result) {
                    debugger;
                    var m = JSON.parse(result.d).response;
                    console.log(JSON.parse(result.d).response);
                    debugger;
                    $("#master_table").empty()
                   if( m.length > 0)
                    {
                       $("#master_table thead").append("<tr><th>Service_Type</th><th>Service_frequency</th><th>Create_reminder</th></tr>");
                        for(var i=0;i<m.length;i++)
                        {
                            if (m[i] !== null) {
                                $("#master_table tbody").append("<tr><td>" +
                                    m[i][0] + "</td><td>" +
                                    m[i][1] + "</td><td>" +
                                    m[i][2] + "</td></tr>");
                            }
                        }
                   }

                   var mast_table = $('#master_table').DataTable();
                   $("#master_table").dataTable({
                       dom: 'Blfrtip',
                       "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }],
                       "bSort": true,
                       "scrollY": 100,
                       "scrollX": true,
                       lengthMenu: [
                           [10, 25, 50, -1],
                           ['10 rows', '25 rows', '50 rows', 'Show all']
                       ],
                       buttons: [
                           'excelHtml5'
                       ]
                   });

                },
                error:function(error)
                {
                    alert(Error);
                }
            });
        });

    </script>

and i add these links

   <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script> 
    <script type="text/javascript" src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script> 
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script> 
    <script type="text/javascript" src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" rel="stylesheet" />
    <link href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css" rel="stylesheet" />

and
<table id="master_table" class="table table-striped table-bordered" style="width:100%;" cellspacing="0">
                <thead></thead>
                 <tbody></tbody>
                    </table>

but this show error on console

Uncaught TypeError: Cannot read property 'parentNode' of null

F12Magic

As far as I can see from your code, you have 3 columns. But you target column 4 in "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [3] }], because arrays are 0 based.
Change that to "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [2] }],

Also I think you're initializing the datatable twice. Remove the line with: var mast_table = $('#master_table').DataTable();

suser

@F12Magic yes i do that
when i do this

$("#master_table").empty()
                   if( m.length > 0)
                    {
                       $("#master_table thead").append("<tr><th>Service_Type</th><th>Service_frequency</th><th>Create_reminder</th></tr>");
                        for(var i=0;i<m.length;i++)
                        {
                            if (m[i] !== null) {
                                $("#master_table tbody").append("<tr><td>" +
                                    m[i][0] + "</td><td>" +
                                    m[i][1] + "</td><td>" +
                                    m[i][2] + "</td></tr>");
                            }
                        }
                   }
   $("#master_table").dataTable({
                        dom: 'Blfrtip',
                        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [2] }],
                        "bSort": true,
                        "scrollY": 100,
                        "scrollX": true,
                        lengthMenu: [
                            [10, 25, 50, -1],
                            ['10 rows', '25 rows', '50 rows', 'Show all']
                        ],
                        buttons: [
                            'excelHtml5'
                        ]
                    });
                    

<table id="master_table" class="table table-striped table-bordered" style="width:100%;" cellspacing="0">
                <thead></thead>
                 <tbody></tbody>
                    </table>

then when i open page then this show no data avaible in table so i recode like this

$("#master_table").empty()
                   if( m.length > 0)
                    {
                       $("#master_table").append("<thead><tr><th>Service_Type</th><th>Service_frequency</th><th>Create_reminder</th></tr></thead>");
                        for(var i=0;i<m.length;i++)
                        {
                            if (m[i] !== null) {
                                $("#master_table").append("<tbody><tr><td>" +
                                    m[i][0] + "</td><td>" +
                                    m[i][1] + "</td><td>" +
                                    m[i][2] + "</td></tr></tbody>");
                            }
                        }
                   }

   $("#master_table").dataTable({
                        dom: 'Blfrtip',
                        "aoColumnDefs": [{ 'bSortable': false, 'aTargets': [2] }],
                        "bSort": true,
                        "scrollY": 100,
                        "scrollX": true,
                        lengthMenu: [
                            [10, 25, 50, -1],
                            ['10 rows', '25 rows', '50 rows', 'Show all']
                        ],
                        buttons: [
                            'excelHtml5'
                        ]
                    });
                    

<table id="master_table" class="table table-striped table-bordered" style="width:100%;" cellspacing="0">
                    </table>

so when i do this then search bar not working
check attach animated gif
or
check this link

http://i.imgur.com/aNb1EIa.gif

allan

My guess is that you have multiple tbody elements. Without a link to a test case showing the issue it is impossible to say though.

Allan

suser

as this is the test case

this is the test case which i tried but in this perfectly fine but this is the hard coded data

https://jsfiddle.net/wtnwgz09/10/

where as same i did that in my code but not work s

@allan

allan

I'd need a test case showing it not working to be able to help. A test case showing it working doesn't really give me much to debug!

Allan

suser

check this
https://jsfiddle.net/wtnwgz09/12/

@allan

allan

My guess was exactly correct. You are adding a tbody every single time in the for loop.

F12Magic

Indeed again a wrong table structure made by your jquery. You seem to make the same mistake over and over. Anyway, here's a corrected FIDDLE

suser

yes i am done with this

Thanku for help

@F12Magic @allan