我目前有一個使用流水線的DataTable，現在我需要它也使用FixedColumns。我可以在瀏覽器控制檯中執行操作，但是在加載後自動運行它，我無所適從。DataTables流水線和固定列
我在fnInitComplete什麼：
var someObj = new FixedColumns(oTable, {
"iLeftColumns": 6,
"iLeftWidth": 600
});
雖然這似乎重新加載表或東西，因爲fnDrawCallback和fnRowCallback由此而稱爲頗有幾分。
編輯： 這是我能找到的最接近的例子，但是，它不使用流水線。 http://datatables.net/release-datatables/extras/FixedColumns/server-side-processing.html
我把簡單的工作例子放在一起。配售FixedColumns初始化代碼爲fnInitComplete足以使其工作：
var oTable = $('#example').dataTable({
// ...
,"sScrollX": "100%"
,"sScrollXInner": "150%"
,"fnInitComplete": function() {
var someObj = new FixedColumns(oTable, {
"iLeftColumns": 1,
"iLeftWidth": 50
});
}
});
我已經使用pipe-lining example from datatables並添加FixedColumns代碼構成的例子。我引用了他們的服務器端PHP腳本，並通過PHP GET proxy解決了XSS問題。完整的測試示例代碼是在這裏（你可以將其粘貼到自己的文件）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!--<base href="http://datatables.net/examples/server_side/"> -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "http://datatables.net/release-datatables/media/css/demo_page.css";
@import "http://datatables.net/release-datatables/media/css/demo_table.css";
</style>
<script type="text/javascript" language="javascript" src="http://datatables.net/release-datatables/media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="http://datatables.net/release-datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8" src="http://datatables.net/release-datatables/extras/FixedColumns/media/js/FixedColumns.js"></script>
<script type="text/javascript" charset="utf-8">
var oCache = {
iCacheLower: -1
};
function fnSetKey(aoData, sKey, mValue)
{
for (var i=0, iLen=aoData.length ; i<iLen ; i++)
{
if (aoData[i].name == sKey)
{
aoData[i].value = mValue;
}
}
}
function fnGetKey(aoData, sKey)
{
for (var i=0, iLen=aoData.length ; i<iLen ; i++)
{
if (aoData[i].name == sKey)
{
return aoData[i].value;
}
}
return null;
}
var hadSomeData = false;
function fnDataTablesPipeline (sSource, aoData, fnCallback) {
var iPipe = 5; /* Ajust the pipe size */
var bNeedServer = false;
var sEcho = fnGetKey(aoData, "sEcho");
var iRequestStart = fnGetKey(aoData, "iDisplayStart");
var iRequestLength = fnGetKey(aoData, "iDisplayLength");
var iRequestEnd = iRequestStart + iRequestLength;
oCache.iDisplayStart = iRequestStart;
console.log('pipeline called');
/* outside pipeline? */
if (oCache.iCacheLower < 0 || iRequestStart < oCache.iCacheLower || iRequestEnd > oCache.iCacheUpper)
{
bNeedServer = true;
}
/* sorting etc changed? */
if (oCache.lastRequest && !bNeedServer)
{
for(var i=0, iLen=aoData.length ; i<iLen ; i++)
{
if (aoData[i].name != "iDisplayStart" && aoData[i].name != "iDisplayLength" && aoData[i].name != "sEcho")
{
if (aoData[i].value != oCache.lastRequest[i].value)
{
bNeedServer = true;
break;
}
}
}
}
/* Store the request for checking next time around */
oCache.lastRequest = aoData.slice();
if (bNeedServer)
{
if (iRequestStart < oCache.iCacheLower)
{
iRequestStart = iRequestStart - (iRequestLength*(iPipe-1));
if (iRequestStart < 0)
{
iRequestStart = 0;
}
}
oCache.iCacheLower = iRequestStart;
oCache.iCacheUpper = iRequestStart + (iRequestLength * iPipe);
oCache.iDisplayLength = fnGetKey(aoData, "iDisplayLength");
fnSetKey(aoData, "iDisplayStart", iRequestStart);
fnSetKey(aoData, "iDisplayLength", iRequestLength*iPipe);
console.log('actually asking server!');
$.getJSON(sSource, aoData, function (json) {
/* Callback processing */
console.log('got back!');
oCache.lastJson = jQuery.extend(true, {}, json);
if (oCache.iCacheLower != oCache.iDisplayStart)
{
json.aaData.splice(0, oCache.iDisplayStart-oCache.iCacheLower);
}
json.aaData.splice(oCache.iDisplayLength, json.aaData.length);
console.log('have data 2! ' + json.aaData.length);
hadSomeData = true;
fnCallback(json);
console.log('after callback');
});
}
else
{
json = jQuery.extend(true, {}, oCache.lastJson);
json.sEcho = sEcho; /* Update the echo for each response */
console.log('have data! ' + json.aaData.length);
json.aaData.splice(0, iRequestStart-oCache.iCacheLower);
json.aaData.splice(iRequestLength, json.aaData.length);
hadSomeData = true;
fnCallback(json);
return;
}
}
$(document).ready(function() {
var fixedColDone = false;
var oTable = $('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
// "sAjaxSource": "http://datatables.net/examples/examples_support/server_processing.php",
"sAjaxSource": "get_proxy.php",
"fnServerData": fnDataTablesPipeline
,"sScrollX": "100%"
,"sScrollXInner": "150%"
/* ,"fnDrawCallback": function() {
console.log('draw callback');
if (!fixedColDone && hadSomeData) {
console.log('actually drawing!');
var someObj = new FixedColumns(oTable, {
"iLeftColumns": 1,
"iLeftWidth": 50
});
fixedColDone = true;
}
}*/
,"fnInitComplete": function() {
var someObj = new FixedColumns(oTable, {
"iLeftColumns": 1,
"iLeftWidth": 50
});
}
});
/*setTimeout(function() {
}, 5000);*/
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing with pipelining example
</div>
<h1>Preamble</h1>
<p>When using server-side processing with DataTables, it can be quite intensive on your server having an Ajax call every time the user performs some kind of interaction - you can effectively DDOS your server with your own application!</p>
<p>This example shows how you might over-come this by modifying the request set to the server to retrieve more information than is actually required for a single page's display. This means that the user can page multiple times (5 times the display size is the default) before a request must be made of the server. Paging is typically the most common interaction performed with a DataTable, so this can be most beneficial to your server's resource usage. Of course the pipeline must be cleared for interactions other than paging (sorting, filtering etc), but that's the trade off that can be made (sending extra information is cheep - while another XHR is expensive).</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" style="width: 200px;">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</body>
</html>
而且get_proxy.php（你必須將它保存到同一個目錄），從https://stackoverflow.com/a/18800645/684229
<?php
$url = 'http://datatables.net/examples/examples_support/server_processing.php'; //Edit your target here
//open connection
$ch = curl_init();
//set the url, number of POST vars, POST data
curl_setopt($ch,CURLOPT_URL, $url . "?" . $_SERVER['QUERY_STRING']);
//execute post
$result = curl_exec($ch);
//close connection
curl_close($ch);
?>
編輯：儘量把初始化喜歡這裏（從其他地方將其刪除）：
setTimeout(function() {
var someObj = new FixedColumns(oTable, {
"iLeftColumns": 1,
"iLeftWidth": 50
});
}, 10000);
，並等待10秒鐘。它現在顯示正確嗎？
不確定可能是您的問題。讓我們來看看我爲你構建的一個基本工作示例。 – TMS