DataTablesのようなjQueryプラグインを探しています

Question

###前提・実現したいこと
現在このような表を組んでいてページングと1ページ当たりの表示数をDataTablesのように出したいのです。

<table>
	<thead>
		<tr>
			<th>日付</th>
			<th>名前</th>
			<th>出身地</th>
			<th>ステータス</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>2000/10/10</td>
			<td>徳川家康</td>
			<td>愛知県</td>
			<td>良好</td>
		</tr>
		<tr>
			<td colspan="4">詳細テキスト</td>
		</tr>
		<tr>
			<td>2000/10/10</td>
			<td>徳川家康</td>
			<td>愛知県</td>
			<td>良好</td>
		</tr>
		<tr>
			<td colspan="4">詳細テキスト</td>
		</tr>
		<tr>
			<td>2000/10/10</td>
			<td>徳川家康</td>
			<td>愛知県</td>
			<td>良好</td>
		</tr>
		<tr>
			<td colspan="4">詳細テキスト</td>
		</tr>
	</tbody>
</table>

###発生している問題
他の表やこの表も当初、詳細部分がなかったのですが急遽必要となりました。
DataTablesでいけると思っていたのですが、DataTablesはセルの結合があった場合にエラーが出ます。
またDataTablesは1行を1項目として扱うので今回のように複数行1セットには対応していないようなのです。

1行で処理するものは検索するとたくさん出てくるのですが、複数行を1個として扱えるものがなかなか見つけられません。

すみませんがよろしくお願いします。

Answer 1

一行で表示するもの用意しておいて、読み込み後２行に変換してみては？

サンプル

たとえばこんな感じでどうでしょうか？

$(function(){
  $('th.shosai').remove();
  $('td.shosai').each(function(){
    var parent_tr=$(this).parent('tr');
    var new_tr=document.createElement('tr');
    $(this).get(0).setAttribute('colspan','4');
    $(this).remove().appendTo(new_tr);
    parent_tr.after(new_tr.outerHTML);
  });
});

<table border>
<thead>
<tr>
<th>日付</th>
<th>名前</th>
<th>出身地</th>
<th>ステータス</th>
<th class="shosai">詳細</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000/10/10</td>
<td>徳川家康</td>
<td>愛知県</td>
<td>良好</td>
<td class="shosai">詳細テキスト</td>
</tr>
<tr>
<td>2000/10/10</td>
<td>徳川家康</td>
<td>愛知県</td>
<td>良好</td>
<td class="shosai">詳細テキスト</td>
</tr>
<tr>
<td>2000/10/10</td>
<td>徳川家康</td>
<td>愛知県</td>
<td>良好</td>
<td class="shosai">詳細テキスト</td>
</tr>
</tbody>
</table>

Comments

[tenomami_2016]

-------
<tr>
<td>2000/10/10</td>
<td>徳川家康</td>
<td>愛知県</td>
<td>良好</td>
<td class="col4">詳細テキスト</td>
</tr>
-------
$('.col4').before('</tr><tr>');
$('.col4').attr('colspan', '4');
-------
DataTablesを呼び出した後にこれでやってみたのですがダメでした・・・
検証ツールで見てみると</tr><tr>と入れたはずなのに<td>良好</td><tr></tr><td class="col4" colspan="4">詳細テキスト</td>となっており無効になっていました。
構造が変わるからでしょうか？

replaceWith()も試してみたのですが同じようにtdと同列にtrができてしまい<tr><td>良好</td><tr><td class="col4" colspan="4">詳細テキスト</td></tr></tr>という結果になってダメでした。

[tenomami_2016]

驚くほど完璧でDataTablesでも問題なく動きました！
ありがとうございます！