JQuery Datatables 행 추가

Question

사용자가 요소를 추가, 편집 및 삭제할 수있는 테이블을 만들려고합니다. datatables 플러그인을 사용하고 있습니다. 여기에 내가하고자하는 것을위한 tutorial이 있습니다. 여기 내 html 코드입니다 :

<p><button class="editor_create">Add new person</button></p> 
    <table cellpadding="0" cellspacing="0" border="0" class="display" id="reg_more" width="100%"> 
     <thead> 
      <tr> 
       <th width="30%">First Name</th> 
       <th width="18%">Last Name</th> 
       <th width="18%">Phone</th> 
       <th width="18%">Email</th> 
       <th width="18%">Ethnicity</th> 
       <th>Edit</th> 
       <th>Delete</th> 
      </tr> 
     </thead> 
    </table> 

그리고 여기 jQuery 코드입니다 :

$(document).ready(function(e) { 
$('#reg_more').dataTable({ 
       "bLengthChange": false, 
       "bInfo": false, 
       "bPaginate": false, 
       "bStateSave": true, 
       "rowHeight": 'auto', 
       "bFilter": true, 
       "bSort": false, 
       "bAutoWidth": false, 

       "aoColumns": [ 
        { "mDataProp": "First Name" }, 
        { "mDataProp": "Last Name" }, 
        { "mDataProp": "Phone" }, 
        { "mDataProp": "Email", "sClass": "center" }, 
        { "mDataProp": "Ethnicity", "sClass": "center" }, 
        { 
         "mDataProp": null, 
         "sClass": "center", 
         "sDefaultContent": '<a href="" class="editor_edit">Edit</a>', 
         "bSortable": false, 
         "bSearchable": false 
        }, 
        { 
         "mDataProp": null, 
         "sClass": "center", 
         "sDefaultContent": '<a href="" class="editor_remove">Delete</a>', 
         "bSortable": false, 
         "bSearchable": false 
        } 
       ] 
      }); 
     } 
     $("#submit").show(); 
     window.scrollTo(0,document.body.scrollHeight); 
    }); 

    var editor = new $.fn.dataTable.Editor({ 
     "domTable": "#reg_more" 
    }); 

    //style="display:none;" 
    //$("#addbtn").click(addrow); 

    editor.add([ 
     { 
      "label": "First Name:", 
      "name": "fname" 
     }, { 
      "label": "Last Name:", 
      "name": "lname" 
     }, { 
      "label": "Phone:", 
      "name": "phone" 
     }, { 
      "label": "Email:", 
      "name": "email" 
     }, { 
      "label": "Ethnicity:", 
      "name": "ethnicity" 
     } 
    ]); 

    $('button.editor_create').on('click', function (e) { 
     e.preventDefault(); 

     editor.create(
      'Add new person', 
      { 
       "label": "Add", 
       "fn": function() { 
        editor.submit() 
       } 
      } 
     ); 
    }); 

    $('#reg_more').on('click', 'a.editor_edit', function (e) { 
     e.preventDefault(); 

     editor.edit(
      $(this).parents('tr')[0], 
      'Edit record', 
      { 
       "label": "Update", 
       "fn": function() { editor.submit(); } 
      } 
     ); 
    }); 

    $('#reg_more').on('click', 'a.editor_remove', function (e) { 
     e.preventDefault(); 

     editor.message("Are you sure you want to remove this row?"); 
     editor.remove(
      $(this).parents('tr')[0], 
      'Delete row', 
      { 
       "label": "Update", 
       "fn": function() { 
        editor.submit() 
       } 
      } 
     ); 
    }); 
}); 

추가 버튼은 소형 폼을 열고보다는 양식을 제출 끝나는 경우 사용자가 입력 할 수있는 모든 정보를 제공합니다. "새 레코드 만들기"버튼이 양식을 여는 자습서와 같은 작은 창을 팝업으로 만들려면 어떻게해야합니까?

Answer 1

변경이 부분이에

} 
    $("#submit").show(); 
    window.scrollTo(0,document.body.scrollHeight); 
}); 

:. 가지고 있지 끝나는 경우

는

$("#submit").show(); 
    window.scrollTo(0,document.body.scrollHeight); 

(추가 } 전체 코드를 나누기 });

Answer 2

.ui-dialog 
{ 
    margin-top:-300px;margin-left:400px; 
}