나는 개인적으로 datatables 내 프로젝트 중 하나 일 삭제 기능 받고 놀아 왔습니다.
내가 발견 한 것은 jquery-ui.js 스크립트를 문서의 머리 부분에 포함시켜야한다는 것입니다.
이와 같이 테이블 행의 형식을 지정해야한다는 것도 발견했습니다. <tr id="1"> 그래서 datatables 자동으로 선택한 행에서 올바른 id를 잡고 추가 처리를 위해 귀하의 PHP 페이지에 전달합니다.
Datatables는 DT_RowId 특수 속성을 사용하여 각 테이블 행에 id를 자동으로 추가 할 수 있습니다.
서버 측 구현을 사용하도록 데이터 테이블을 설정 한 경우 ajax 요청에 대한 응답으로 서버에서 반환 된 JSON 데이터에 DT_RowId을 포함 할 수 있습니다. 예를 JSON 형식
:
{
"sEcho": 1,
"iTotalRecords": "1",
"iTotalDisplayRecords": "1",
"aaData": [
{
"DT_RowId": "1",
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
}
]
}
가 여기 내 예제 모형 코드입니다. 서버 측 구현은이 예제에는 포함되어 있지 않습니다. 예제 용 datatables와 함께 제공되는 예제 소스 objects.txt를 사용하고 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="datatables/media/js/jquery.dataTables.js"></script>
<script src="examples/examples_support/jquery.jeditable.js"></script>
<script src="http://jquery-datatables-editable.googlecode.com/svn/trunk/media/js/jquery-ui.js"></script>
<script src="datatables/media/js/jquery.datatables.editable.js"></script>
<style type="text/css">
@import "datatables/media/css/demo_table.css";
@import "datatables/media/css/demo_table_jui.css";
@import "examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
</style>
<script>
$(document).ready(function() {
var anOpen = [];
var sImageUrl = "/datatables/examples/examples_support/";
var oTable = $('#example').dataTable({
"sPaginationType": "full_numbers",
"bJQueryUI": true,
"bProcessing": true,
"sAjaxSource": "/datatables/examples/ajax/sources/objects.txt",
"aoColumns":
[
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": '<img src="'+sImageUrl+'details_open.png'+'">'
},
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "grade" }
]
}).makeEditable({
sDeleteURL: "DeleteData.php",
//Converts to JQuery UI button (full list of options on http://jqueryui.com/demos/button)
oDeleteRowButtonOptions:
{
label: "Remove",
icons: {primary:'ui-icon-trash'}
},
//Additional Paramaters can be sent for processing...
oDeleteParameters:
{
action:"delete_dt_projects_record",
dtSecurity:"9999999999"
}
});
//For Expandable Collapsible Rows
$('#example td.control').live('click', function() {
var nTr = this.parentNode;
//var projID = $(this).closest("td").next().text();
//console.log(projID);
//console.log(anOpen);
//console.log(nTr);
var i = $.inArray(nTr, anOpen);
//console.log(i);
if (i === -1)
{
$('img', this).attr('src', sImageUrl+"details_close.png");
var nDetailsRow = oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push(nTr);
}
else
{
$('img', this).attr('src', sImageUrl+"details_open.png");
$('div.innerDetails', $(nTr).next()[0]).slideUp(function()
{
oTable.fnClose(nTr);
anOpen.splice(i, 1);
});
}
});
function fnFormatDetails(oTable, nTr)
{
var oData = oTable.fnGetData(nTr);
var sOut =
'<div class="innerDetails">'+
'<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr><td>Rendering engine:</td><td>'+oData.engine+'</td></tr>'+
'<tr><td>Browser:</td><td>'+oData.browser+'</td></tr>'+
'<tr><td>Platform:</td><td>'+oData.platform+'</td></tr>'+
'<tr><td>Version:</td><td>'+oData.version+'</td></tr>'+
'<tr><td>Grade:</td><td>'+oData.grade+'</td></tr>'+
'</table>'+
'</div>';
return sOut;
}
});
</script>
</head>
<body>
<div style="width:900px">
<div class="add_delete_toolbar">
<button id="btnDeleteRow">Delete</button>
</div>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th></th>
<th>Rendering engine</th>
<th>Browser</th>
<th>CSS grade</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</body>
</html>
주 당신은 당신이 작업 예제를보기 위해있는 위치에 스크립트와 스타일의 URL 경로를 변경해야 할 수도 있습니다.
업데이트 : HTML 소스에이 위치를 수동으로 포함시켜야합니다.
<button id="btnDeleteRow">Delete</button>