initialize dataTable does not work

Omri

Hello,

I am using jquery dataTable version 1.9.4.
But, init dataTable does not work.
All properties don't work.
Example:

$(document).ready( function () {
  $('#example').dataTable( {
    "bAutoWidth": false
  } );
} );

When I set any property (bAutoWidth, bLengthChange, bPaginate...), no change happens to the table.

Please, if someone has an idea, I will be grateful.

Best regards,

Omri

Omri

This is my code:

<div id="boxContentDiv" class="box-content nopadding" style="display:none;">                                              
    <table id="projectsTable" class="table table-hover table-nomargin table-bordered table-striped dataTable dataTable-tools dataTable-colvis dataTable-nosort" data-nosort="8">
     <thead>                               
           <tr>                                    
                   <th>إسم المشروع</th>
                   <th>مكان المشروع</th>
                   <th style="width: 65px !important;">المبلغ</th> 
                   <th style="width: 30px !important;">الأهمية</th>                                        
                   <th style="width: 40px !important;">الحالة</th>                                                                                                  
                   <th style="width: 70px !important;">التقدم</th>                                   
                   <th style="width: 30px !important;">المدة</th>                                   
                   <th style="width: 40px !important;">مدير المشروع</th>
                   <th style="max-width: 165px; width: 165px;" class='hidden-480'>الخيارات</th>
            </tr>
      </thead>
      <tbody>                                                          
             <tr>                              
                   <td></td>
                   <td> </td>
                   <td style="width: 65px !important;"></td> 
                   <td style="width: 30px !important;"></td>                                        
                   <td style="width: 40px !important;"></td>                                                                                                  
                   <td style="width: 70px !important;"> </td>
                   <td style="width: 30px !important;"> </td>                                    
                   <td style="width: 40px !important;"> </td>
                   <td style="max-width: 165px; width: 165px;" class='hidden-480'></td>
              </tr>                                            
         </tbody>
     </table>                                            
</div>

<script type="text/javascript">              
        $(document).ready(function () {            
            loadAllProjects();           
        });

function loadAllProjects() {
    var baseUrl = getBaseUrl();
    var url = baseUrl + "../WebServices/ProjectManagementServices.svc/GetAllProjects";

    $.ajax({
        type: "POST",
        url: url,
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            $('#boxContentDiv').fadeIn(1);
            var aaData = $.parseJSON(data.d);
            var oTable = $('#projectsTable').dataTable( {"bAutoWidth": false});            
            oTable.fnSetColumnVis(1, false);
            oTable.fnSetColumnVis(2, false);
            oTable.fnSetColumnVis(3, false);
            oTable.fnSetColumnVis(5, false);
            oTable.fnClearTable();
            for (var i = 0; i < aaData.length; i++) {
                var projectId = aaData[i].ProjectId;
                var name = aaData[i].Name;
                var place = aaData[i].Place;
                var strAmount = aaData[i].StrAmount;
                var priorityClass = aaData[i].PriorityClass;
                var priorityLabel = aaData[i].PriorityLabel;
                var statusClass = aaData[i].StatusClass;
                var statusLabel = aaData[i].StatusLabel;
                var strProgress = aaData[i].StrProgress;
                var strStartDate = aaData[i].StrStartDate;
                var strEndDate = aaData[i].StrEndDate;
                var comment = aaData[i].Comment;
                var strPeriod = aaData[i].StrPeriod;

 var priority = '<span style="cursor: pointer; padding: 3px; text-align: center; vertical-align: middle; width: 50px;" class="' + priorityClass + '" onclick=" editProjectPriority(' + projectId + '); return false; ">' + priorityLabel + '</span>';
 var status = '<span style="cursor: pointer; padding: 3px; text-align: center; vertical-align: middle; width: 50px;" class="' + statusClass + '" onclick=" editProjectStatus(' + projectId + '); return false; ">' + statusLabel + '</span>';

 var btnView = '<a href="#" class="btn" style="padding: 5px 6px 0;" rel="tooltip" title="عرض المشروع" onclick=" viewProject(' + projectId + '); return false; "><i class="icon-search"></i></a>';
 var btnEdit = '<a href="#" class="btn" style="padding: 5px 6px 0;" rel="tooltip" title="البيانات الأساسية"><i class="icon-edit"></i></a>';
 var btnTeam = '<a href="#" class="btn" style="padding: 5px 6px 0;" rel="tooltip" title="فريق العمل"><i class="icon-group"></i></a>';
  var btnFiles = '<a href="#" class="btn" style="padding: 5px 6px 0;" rel="tooltip" title="الملفات" onclick=" $("#modal-projectFiles").modal(); return false; "><i class="icon-file"></i></a>';
 var btnComment = '<a href="#" class="btn" style="padding: 5px 5px 1px;" rel="tooltip" title="إضافة تعليق" onclick=" viewModalComment(' + projectId + ', ' + name + '); return false; "><i class="glyphicon-comments"></i></a>';
var btnProposal = '<a href="#" class="btn" style="padding: 5px 5px 1px;" rel="tooltip" title="إضافة اقتراح" onclick=" viewModalProposal(' + projectId + ', ' + name + '); return false; "><i class="glyphicon-lightbulb"></i></a>';

var div = '<div style="width:165px; max-width:165px;">'+btnView+' '+btnEdit+' '+btnTeam+' '+' '+btnFiles+' '+btnComment+' '+btnProposal+'</div>';

 oTable.fnAddData([name, place, strAmount, priority, status, strProgress, strPeriod, comment, div], false);
            }
            
            oTable.fnDraw();
            $("#content").css({
                "min-height": "auto",
                "height": "auto"
            });
            var $el = $('.content-refresh');
            $el.find("i").addClass("icon-spin");
            setTimeout(function () {
                $el.find("i").removeClass("icon-spin");
            }, 2000);
        },
        failure: function () { }
    });
}
    </script>  

Omri

It is resolved.

The table was initialized twice in two different files.