Server Side Datable 1.10 dom attribute Issue

HanushmaYalla

Hi All,

I am using bootstrap datatable with serverside. I am getting parsing error as "Error Parsing /pages/administration.xhtml: Error Traced[line: 52] The content of elements must consist of well-formed character data or markup." when trying to include "dom:'<"datatable-header"fl><"datatable-scroll"t><"datatable-footer"ip>'". Can any one please help me on this ASAP.

Bellow is my Dt initialisation

    var orgTableData;
                                orgTableData = $('#AdminForm\\:ID_VIEW_USERS_DT').dataTable({           
                                    "destroy": true,
                                    "serverSide": true,
                                    "autoWidth": false,
                                    "ordering":true,
                                     "columnDefs": [{
                                                "orderable": true,
                                                "width": '100px',
                                               }],
                                    "info": true,
                                    "dom": "ltip",
                                    "language": {"zeroRecords": "No matching records found.","infoFiltered": "", "search": '<span>Filter:</span> _INPUT_',"searchPlaceholder": 'Type to filter...',"lengthMenu": '<span>Show:</span> _MENU_', "paginate": { 'first': 'First', 'last': 'Last', 'next': '&rarr;', 'previous': '&larr;' }},
                                    "columns": [
                                              { "title": "First Name","mDataProp": "firstName" ,"defaultContent": "" ,"bSortable":true,
                                                "render" :function(data,type,full){
                                                    var firstName = data;
                                                    if(firstName.length>20){
                                                        firstName = firstName.substring(0, 19)+'<span class="tip textwrap" title="'+data+'">....</span>';
                                                    }
                                                    return firstName;
                                                }},
                                              { "title": "Last Name","mDataProp": "lastName" ,"defaultContent": "" ,"bSortable":true,
                                                "render" :function(data,type,full){
                                                    var lastName = data;
                                                    if(lastName.length>20){
                                                        lastName = lastName.substring(0, 19)+'<span class="tip textwrap" title="'+data+'">....</span>';
                                                    }
                                                    return lastName;
                                                }},
                                              { "title": "Email","mDataProp": "email","defaultContent":"","bSortable":true }, 
                                              { "title": "Created By","mDataProp": "createdBy","defaultContent": ""  }, 
                                              { "title": "Created Date","mDataProp": "createdDate","defaultContent": "" ,"bSortable":true }, 
                                              { "title": "Status","mDataProp": "status","defaultContent": "" ,"bSortable":true,
                                                "render": function ( data, type, full ) {
                                                    if(full['status'] =="ACTIVE"){
                                                      return '<span class="label label-success"> Active</span>';
                                                    }else {
                                                      return '<span class="label label-default"> Inactive</span>';
                                                    }
                                               }},
                                              { "title": "Action","mDataProp": "status","sWidth": "200px","defaultContent": "","":false,
                                              "render": function ( data, type, full ) {
                                                  if(full['status'] =="ACTIVE"){
                                                      return '<div class="col-lg-8"><input id="datatoggle_'+full['id']+'" class="datatoggle" value="\''+full['id']+'\'" checked="checked"  data-toggle="toggle" data-on="Enabled" data-off="Disabled" type="checkbox" data-style="ios" data-size="mini"/></div>'+
                                                         '<div class="col-lg-4" style="margin-top:6px;"> <a rel="tooltip" onclick="fnPasswordReset(\''+full['id']+'\')" title="Change Password"><i class="icon-pencil5"></i> </a></div>';
                                                  }else{
                                                      return '<div class="col-lg-8"><input id="datatoggle_'+full['id']+'" class="datatoggle" value="\''+full['id']+'\'" data-toggle="toggle" data-on="Enabled" data-off="Disabled" type="checkbox" data-style="ios" data-size="mini"/></div>'+
                                                         '<div class="col-lg-4" style="margin-top:6px;"><i class="icon-pencil5"></i></div>';
                                                    }
                                               }} 
                                             ],
                                    "sAjaxSource": "loadExistingUsersJSON.jsf",
                                    "fnServerData": function ( sSource, aoData, fnCallback, oSettings ) {
                                        jQuery.loader.open();
                                        oSettings.jqXHR = jQuery.ajax({
                                          "dataType": 'json',
                                          "type": "POST",
                                          "url": sSource,
                                          "data": aoData,
                                          "searching": false,
                                          "success": function (json) {
                                            fnCallback(json);
                                            jQuery.loader.close(true);


                                          },
                                          "error": function (json) {
                                                        fnCallback(json);
                                                        jQuery.loader.close(true);                                                                                                          
                                                      }
                                                    });
                                              },                            
                                    "fnDrawCallback": function() {
                                    jQuery(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').addClass('dropup');
                                    jQuery('#AdminForm\\:ID_VIEW_USERS_DT .datatoggle').bootstrapToggle();
                                    jQuery('[rel="tooltip"]').tooltip();
                                     $('#AdminForm\\:ID_VIEW_USERS_DT .datatoggle').change(function() {
                                          alert('Toggle: ' + $(this).prop('checked'));
                                        })
                                },
                                "fnPreDrawCallback": function() {
                                        jQuery(this).find('tbody tr').slice(-3).find('.dropdown, .btn-group').removeClass('dropup');
    }
                        }); 

Thank You

allan

Put CDATA "tags" around your Javascript so it doesn't get parsed as XML.

Allan

HanushmaYalla

Thank you Sooo much Allan..
It worked for me !!!!!!!!!!!