datatable - 带有引导模式窗口的数据表

Question

我有两个页面...两者都具有相同的表格内容...唯一的区别在于它们的内容加载技术..

1) http://myraipur.com/SuprError/Test2.php 这里的数据表内容是通过简单的“Tr”和“Td”加载的。模态窗口工作正常。

2) http://myraipur.com/SuprError/Test1.php 这里的数据表内容是通过延迟加载加载的。模态窗口不工作。

你能帮我么！！

Answer 1

只是为了添加一个我觉得对我有用的直接方法。（也是我的第一篇 Stackoverflow 帖子！）

首先使用了 http://dotnetspeak.com/2013/05/creating-simple-please-wait-dialog-with-twitter-bootstrap提供的Javascript Modal函数

	var loading;
	loading = loading || (function () {
		var pleaseWaitDiv = $('<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button><h4 class="modal-title" id="mySmallModalLabel">Loading Data</h4></div><div class="modal-body"><div class="progress"><div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%"></div></div></div></div><!-- /.modal-content --></div><!-- /.modal-dialog -->');
		return {
			showPleaseWait: function() {
				pleaseWaitDiv.modal();
			},
			hidePleaseWait: function () {
				pleaseWaitDiv.modal('hide');
			},

		};
	})();

这是我的数据表调用

$(document).ready(function() {
$('#address')
    .on( 'processing.dt', function ( e, settings, processing ) {
        if (processing) {
			$(document).ready(function() {
				$('#address').click(loading.showPleaseWait());
			});
		} else {
			$(document).ready(function() {
				$('#address').click(loading.hidePleaseWait());
			});		
		
		
		}
    } )
    .dataTable({
                 "Processing": false,
                 "sAjaxSource": "ajax/ajax_address_list.php",
                 "aoColumns": [
                        { mData: 'add_cust' } ,
                        { mData: 'add_main' },
                        { mData: 'add_alias' }
                ],
				"iDisplayLength": 50

        });		
	} );

希望这可以帮助！

Answer 2

当您的延迟完成而不是准备好文档时，您需要运行此代码：

$("a[data-toggle=modal]").click(function (e) {
    lv_target = $(this).attr('data-target');
    lv_url = $(this).attr('href');
    $(lv_target).load(lv_url);
});