BootstrapのページングデザインをCakePHPで表示する。

CakePHPでViewをbakeするとページネーションのボタンが出来ますが、せっかくBootstrapを使っているんだから、Bootstrapのデザインのやつを使いたい！ということで作ってみました！
実装したコードは下の方にまとめて載せています。

まずはbakeしたときに出来るページネーションボタン部分

<div class="paging">
<?php
	echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled'));
	echo $this->Paginator->numbers(array('separator' => ''));
	echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));
?>
</div>

Bootstrapのページネーションボタンは以下のように実装されるので、それに合わせないといけません。

<ul class="pagination">
  <!-- [disabled]で白くなってリンクが無効になる -->
  <li class="disabled"><a href="#">previous</a></li>
  <!-- 現ページ -->
  <li class="active"><a href="#">1</a></li>
  <li><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">next</a></li>
</ul>

これにCakePHPのページネーション機能をつけるイメージです。
そのために超えなければならない課題が2つあります。
1.ページ数に応じてボタンを作る。
2.ページ番号によってデザインを変更する(現ページ番号は青く塗りつぶす等)

では実装してみます！
HTML

<div class="paging">
	<ul class="pagination">
		<li><?php echo $this->Paginator->prev('< ' . __('previous'), array(), null, array('class' => 'prev disabled')); ?></li>
                //クラスを付けてjqueryで取得
		<?php echo $this->Paginator->numbers(array('separator' => '','class' => 'pageNum')); ?>
		<li><?php echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled')); ?></li>
	</ul>
</div>

JavaScript

$(function(){
	//ページ番号のボタンをli要素に入れ込む
	var spans = $('.pagination').find('.pageNum');
	for(var i=0; i < spans.length ; i++){
		$(spans[i]).wrap('<li></li>');
	}
        //現在のページ番号を青く塗りつぶす
	$('.current').parent('li').addClass('active');
        //CakePHPで「disabled」クラスがついていたら、Bootstrapのliにも付ける
	$('.disabled').parent('li').addClass('disabled');
})

※補足

echo $this->Paginator->next(__('next') . ' >', array(), null, array('class' => 'next disabled'));

は

<span class="next"><a href="~~~~" rel="next">next</a></span>

といった感じに出力されます。
もしnextが使えなかったら(現ページが最後)spanにdisabledクラスがつきます。
なので、上でspanについたdisabledをliにも加えています。(liにつけないとBootstrapのデザインに反映されないため)

echo $this->Paginator->numbers(array('separator' => '','class' => 'pageNum'));

はページ数分だけspan要素を作成しています。
なので、自分でclassを付けて後から一つ一つli要素の中に入れています。
また、現ページ番号のspan要素にはcurrentクラスがつくため、その部分のliにはactiveクラスを付けています。