2012-12-21 2 views
5

데이터 테이블을 내 프로젝트에 통합하려고합니다. 내 테이블 중 하나에 행을 추가하는 버튼이 있습니다. 표시된 방법은 here입니다.두 개의 검색 상자 및 페이지 매김 데이터를 보여주는 데이터 테이블

duplicate datatable controls

업데이트를 여기

전체 페이지입니다 :

<!DOCTYPE html> 
<html class="no-js"> 
    <head> 
     <meta charset="utf-8"> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

      <title>Project name</title> 

     <meta name="description" content=""> 
     <meta name="viewport" content="width=device-width"> 

     <link rel="shortcut icon" type="image/png" href="/static/images/favicon.ico" /> 

     <!-- For third-generation iPad with high-resolution Retina display: --> 
     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/static/images/apple-touch-icon-144x144-precomposed.png"> 
     <!-- For iPhone with high-resolution Retina display: --> 
     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/static/images/apple-touch-icon-114x114-precomposed.png"> 
     <!-- For first- and second-generation iPad: --> 
     <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/static/images/apple-touch-icon-72x72-precomposed.png"> 
     <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> 
     <link rel="apple-touch-icon-precomposed" href="/static/images/apple-touch-icon-precomposed.png"> 

     <link rel="stylesheet" href="/static/css/bootstrap.min.css"> 

     <style> 
      body { 
       padding-top: 60px; 
       padding-bottom: 40px; 
      } 
     </style> 
     <link rel="stylesheet" href="/static/css/bootstrap-responsive.min.css"> 
     <link rel="stylesheet" href="/static/css/main.css"> 
     <script src="/static/js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script> 
    </head> 
    <body> 




<div class="navbar navbar-fixed-top navbar-inverse"> 
    <div class="navbar-inner"> 
     <div class="container"> 
      <a class="brand" href="/">VBEnergyZone</a> 
      <div class="nav-collapse"> 



<ul class="nav"> 

    <li><a href="/">Home</a></li> 
    <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tools<b class="caret"></b></a> 
     <ul class="dropdown-menu"> 





     </ul> 
    </li> 

     <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Administration<b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="/core/customers/">Customers</a></li> 
       <li><a href="/core/meters/">Meters</a></li> 
       <li><a href="/core/price_requests/">Price requests</a></li> 
       <li><a href="/core/suppliers/">Suppliers</a></li> 
       <li><a href="/core/supplier_groups/">Supplier groups</a></li> 
       <li><a href="/core/utilities/">Utilities</a></li> 
      </ul> 
     </li> 



     <li><a href="/core/user_profiles/">User Profiles</a></li> 
     <li><a href="/admin">Django Admin</a></li> 

</ul> 

<div class="pull-right"> 
    <ul class="nav"> 
     <li><a href="/about"><i class="icon-info-sign icon-white"></i> About</a></li> 

      <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><i class="icon-star"></i> eevenson<span class="caret"></span></a> 


     <ul class="dropdown-menu"> 
      <li><a href="/core/user_profiles/eevenson/">Profile</a></li> 
      <li><a href="/accounts/password_change/">Change password</a></li> 
      <li><a href="/accounts/logout/">Log out</a></li> 
     </ul> 
    </ul> 
</div> 

      </div> 
     </div> 
    </div> 
</div> 


     <div class="container"> 
      <div class='messages'> 

      </div> 



    <h2>A Test Customer</h2> 
    <h3>Customer</h3> 
    <form action="" id="form" enctype="multipart/form-data" method="post"> 


<div style='display:none'><input type='hidden' name='csrfmiddlewaretoken' value='NCQ15jA7erX5dAbx20Scr3gWxgaTn3Iq' /> </div><ul class='nav nav-tabs'><li class='active'><a class='tab' href='#tab0' data-toggle='tab'>Basic information</a></li><li><a class='tab' href='#tab1' data-toggle='tab'>Meters</a></li><li><a class='tab' href='#tab2' data-toggle='tab'>Emails</a></li><li><a class='tab' href='#tab3' data-toggle='tab'>Phone numbers</a></li><li><a class='tab' href='#tab4' data-toggle='tab'>Locations</a></li><li><a class='tab' href='#tab5' data-toggle='tab'>Documents</a></li><li><a class='tab' href='#tab6' data-toggle='tab'>Managers</a></li></ul></hr><div 
    class="tab-content" ><div 
    class="tab-pane active" id="tab0"><div 
    class="row" ><div 
    class="span4" ><div id="div_id_name" class="control-group"><label for="id_name" class="control-label requiredField"> 
       Name<span class="asteriskField">*</span></label><div class="controls"><input name="name" value="A Test Customer" class="span4 textinput textInput" maxlength="128" type="text" id="id_name" /> </div></div><div id="div_id_legal_name" class="control-group"><label for="id_legal_name" class="control-label "> 
       Legal name 
      </label><div class="controls"><input id="id_legal_name" type="text" class="span4 textinput textInput" name="legal_name" maxlength="128" /> </div></div><div id="div_id_tags" class="control-group"><label for="id_tags" class="control-label "> 
       Tags 
      </label><div class="controls"><input id="id_tags" type="text" class="span4 tagwidget" name="tags" /> <p id="hint_id_tags" class="help-block">A comma-separated list of tags.</p></div></div></div><div 
    class="span4" ><div id="div_id_duns_number" class="control-group"><label for="id_duns_number" class="control-label "> 
       Duns number 
      </label><div class="controls"><input id="id_duns_number" type="text" class="span4 textinput textInput" name="duns_number" maxlength="9" /> </div></div><div id="div_id_taxpayer_id_number" class="control-group"><label for="id_taxpayer_id_number" class="control-label "> 
       Taxpayer ID number 
      </label><div class="controls"><input id="id_taxpayer_id_number" type="text" class="span4 textinput textInput" name="taxpayer_id_number" maxlength="9" /> </div></div><div id="div_id_customer_type" class="control-group"><label for="id_customer_type" class="control-label "> 
       Customer type 
      </label><div class="controls"><select id="id_customer_type" class="span4 select" name="customer_type"><option value="" selected="selected">---------</option><option value="MUNI">Munincipality</option><option value="SCDT">School District</option><option value="UNIV">University</option></select></div></div></div><div 
    class="span4" ><div id="div_id_active" class="control-group"><div class="controls"><label for="id_active" class="checkbox "><input id="id_active" checked="checked" type="checkbox" class="span4 checkboxinput" name="active" /> 
         Active 












        </label></div></div></div></div></div><div 
    class="tab-pane" id="tab1"><div 
    class="row" ><div 
    class="span4" ><div id="div_id_meter_textarea" class="control-group"><label for="id_meter_textarea" class="control-label "> 
       List of meters 
      </label><div class="controls"><textarea id="id_meter_textarea" rows="10" cols="40" name="meter_textarea" class="span4 textarea"></textarea><p id="hint_id_meter_textarea" class="help-block">Enter meter ESI IDs one per line. Meters will become owned    by customer. New meter ESI IDs will be created as necessary.    Duplicate ESI IDs will be ignored. Meters owned by a    different customer will change ownership.</p></div></div></div><div 
    class="span4" ><div id="div_id_utility" class="control-group"><label for="id_utility" class="control-label "> 
       Utility 
      </label><div class="controls"><select id="id_utility" class="span4 select" name="utility"><option value="" selected="selected">---------</option></select></div></div></div><div 
    class="span4" ></div></div><fieldset><legend>Meters</legend><input type="hidden" name="meters-TOTAL_FORMS" value="0" id="id_meters-TOTAL_FORMS" /> <input type="hidden" name="meters-INITIAL_FORMS" value="0" id="id_meters-INITIAL_FORMS" /><input type="hidden" name="meters-MAX_NUM_FORMS" id="id_meters-MAX_NUM_FORMS" /> <table id="meters" class="formsetTable"><thead><tr><th>ESI ID</th><th>Utility</th><th class="vbNoSearchSort">Delete?</th></tr></thead><tbody></tbody></table></fieldset></hr></div><div 
    class="tab-pane" id="tab2"><div 
    class="row" ><div 
    class="span4" ></div><div 
    class="span4" ></div><div 
    class="span4" ></div></div><fieldset><legend>Emails</legend><input type="hidden" name="emails-TOTAL_FORMS" value="1" id="id_emails-TOTAL_FORMS" /> <input type="hidden" name="emails-INITIAL_FORMS" value="0" id="id_emails-INITIAL_FORMS" /><input type="hidden" name="emails-MAX_NUM_FORMS" id="id_emails-MAX_NUM_FORMS" /> <table id="emails" class="formsetTable"><thead><tr><th>Email</th><th>Email type</th><th class="vbNoSearchSort">Delete?</th></tr></thead><tbody><tr class="row1"><td><input id="id_emails-0-email" type="text" name="emails-0-email" maxlength="75" /> </td><td><input id="id_emails-0-email_type" type="text" name="emails-0-email_type" maxlength="128" /> </td><td><input type="hidden" name="emails-0-id" id="id_emails-0-id" /> <input type="checkbox" name="emails-0-DELETE" id="id_emails-0-DELETE" /></td></tr></tbody><tfoot><tr style="display:none;" class="template"><td><input id="id_emails-NUM-email" type="text" name="emails-NUM-email" maxlength="75" /> </td><td><input id="id_emails-NUM-email_type" type="text" name="emails-NUM-email_type" maxlength="128" /> </td><td><input type="hidden" name="emails-NUM-id" id="id_emails-NUM-id" /> <input type="checkbox" name="emails-NUM-DELETE" id="id_emails-NUM-DELETE" /></td></tr></tfoot></table></fieldset></hr><input class='addEmail btn btn-primary' name="addRow" value="Add row" /> </div><div 
    class="tab-pane" id="tab3"><div 
    class="row" ><div 
    class="span4" ></div><div 
    class="span4" ></div><div 
    class="span4" ></div></div></div><div 
    class="tab-pane" id="tab4"><div 
    class="row" ><div 
    class="span4" ></div><div 
    class="span4" ></div><div 
    class="span4" ></div></div></div><div 
    class="tab-pane" id="tab5"><div 
    class="row" ><div 
    class="span4" ></div><div 
    class="span4" ></div><div 
    class="span4" ></div></div></div><div 
    class="tab-pane" id="tab6"><div 
    class="row" ><div 
    class="span4" ></div><div 
    class="span4" ></div><div 
    class="span4" ></div></div></div></div> 

     <div class="btn-toolbar"> 
      <input class='btn btn-primary' type="submit" name="submit" value="Submit changes" /> 
      <a href="/core/customers/" class="btn btn-primary">Cancel</a> 
     </div> 
    </form> 



       <hr/> 

     </div> 

     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
     <script>window.jQuery || document.write('<script src="/static/js/vendor/jquery-1.8.3.min.js"><\/script>')</script> 
     <script src="/static/js/vendor/bootstrap.min.js"></script> 
     <script src="/static/js/main.js"></script> 


    <!-- DataTables CSS --> 
    <link rel="stylesheet" type="text/css" href="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 

    <!-- DataTables --> 
    <script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 

    <script>  

    /* Create an array with the values of all the input boxes in a column */ 
    $.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) 
    { 
     var aData = []; 
     $('td:eq('+iColumn+') input:last', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
      aData.push(this.value); 
     }); 
     return aData; 
    } 

    /* Create an array with the values of all the select options in a column */ 
    $.fn.dataTableExt.afnSortData['dom-select'] = function (oSettings, iColumn) 
    { 
     var aData = []; 
     $('td:eq('+iColumn+') select:last', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
      aData.push($(this).val()); 
     }); 
     return aData; 
    } 

    /* Create an array with the values of all the checkboxes in a column */ 
    $.fn.dataTableExt.afnSortData['dom-checkbox'] = function (oSettings, iColumn) 
    { 
     var aData = []; 
     $('td:eq('+iColumn+') input:last', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
      aData.push(this.checked==true ? "1" : "0"); 
     }); 
     return aData; 
    } 

     $(document).ready(function() { 
      $('#meters').dataTable(
       { 
        "aoColumns": [ 
         null, 
         null, 
         { "sSortDataType": "dom-checkbox" }, 
        ], 
        "aoColumnDefs": [ 
         { 
          "aTargets":  ["vbNoSearchSort"], 
          "bSearchable": false, 
          "bSortable": false 
         } 
        ], 
        "bProcessing" :true, 
        "bStateSave" :true, 
        "sPaginationType": "full_numbers" 
       } 
      ); 

      $('#emails').dataTable(
       { 
        "aoColumns": [ 
         { "sSortDataType": "dom-text" }, 
         { "sSortDataType": "dom-text" }, 
         { "sSortDataType": "dom-checkbox" }, 
        ], 
        "aoColumnDefs": [ 
         { 
          "aTargets":  ["vbNoSearchSort"], 
          "bSearchable": false, 
          "bSortable": false 
         } 
        ], 
        "bProcessing" :true, 
        "bStateSave" :true, 
        "sPaginationType": "full_numbers" 
       } 
      ); 

     }); 
    </script> 

    <script> 
    var emailsTable; 
    var metersTable; 

    $(document).ready(function() { 
     $('#form').submit(function() { 
      var sData = 
       emailsTable.$('input') 
       .add(metersTable.$('input')) 
       .add('input') 
       .add('textarea') 
       .add('select') 
       .serialize(); 
      $.post('', sData, function(data){$('body').html(data); }); 
      // $.post('', sData, function(data){ 
      // var messages = $('.messages', data); 
      // $('.messages').replaceWith(messages); 
      // }); 
      return false; 
     }); 

     emailsTable = $('#emails').dataTable(); 
     metersTable = $('#meters').dataTable(); 
    }); 

    $('.addEmail').click(function(){ 
     var type = 'emails' 
     var total = $('#' + type).dataTable().fnSettings().fnRecordsTotal(); 
     var tableId = $('#'+ type).attr('id'); 
     var template = new Array(); 

     $('#'+tableId+' tfoot tr.template td') 
     .clone() 
     .each(function(){ 
      $(this).html($(this).html().replace(/NUM/g,total)); 
     }) 
     .each(function(){ 
      template.push($(this).html()); 
     }); 

     $('#'+tableId).dataTable().fnAddData(template); 
     total++; 
     $('#id_' + type + '-TOTAL_FORMS').val(total); 

    }); 
    </script> 


    </body> 
</html> 

이유를 다음과 같이 결과를 행을 추가하고 제출 후, 나는 두 datatables 제어와 끝까지 #emails 테이블에 행을 추가해도 제출 후 중복 데이터 테이블 컨트롤이 생성됩니까?

어떤 이유로 datatables는 다른 div # emails_wrapper 내에 div # emails_wrapper를 내장하고 있습니다.

+0

이 경우 발생하는 마크 업을 붙여 넣을 수 있습니까? –

+0

예 - 질문을 업데이트했습니다. 감사. – Erik

+0

문제가 행과 맞지 않습니까? 문제는 컨트롤에 있습니다. 나는'show entries' 드롭 다운과 검색 상자를 올바르게 의미합니까? –

답변

2

나는 allat가 datatables에서 일부 helpful input을 얻었습니다. 구체적으로 :

$ ('본문') .html (데이터);

당신은 전체 HTML 본문의 트리를 재 작성하고 있습니다 -. 그래서 당신은 $를 ('# 메일')를 호출 할 때 데이터 테이블은() DataTables 해당 노드의 테이블이 (그것을 참고 이미 가 있는지 확인합니다은 노드 확인, 아니 ID 확인),하지만 당신이 그것을 파괴하고 다시 작성한 이후로 없습니다. 따라서 원래 HTML은 이전 테이블에서 여전히 존재하고 DataTables 은 새 HTML 테이블 요소이므로 새 테이블을 추가합니다.

트리 전체를 다시 작성하기 전에 테이블을 파괴하거나 전체 트리를 다시 작성하지 말고 업데이트 할 비트 을 조작해야합니다.

관련 문제