JQury datatables 改变处理中 显示样式

      datatables表格控件真的很强大,默认的处理中只是一个黑色的文字,而且在表格顶部,不太好看,所以需要自定义修改它的样式,参考官网的初始化设置表格的函数形式,连接如下:https://datatables.net/reference/event/processing,主要函数是这个:

    

 $('#example'String).on( 'processing.dt'String, function ( e, settings, processing ) {

       $('#processingIndicator').css( 'display', processing ? 'block' : 'none' );//官网设置隐藏与否

    } )
    

    以下是我设置表格样式的过程:

     1.第一步:就是找到表格中的处理中的id,然后使用css,设置它的样式,如果你不知道处理中的id的话,可以使用浏览器,打开F12开发者模式,看看,如下图片:

JQury datatables 改变处理中 显示样式_第1张图片

      

     2.第二步:找到了这个处理中的id,就可以参照官网的形式,在表格初始化的时候,给他加上自己设置的样式,(注意需要打开属性可以使用处理中的:"bProcessing" : true,"sProcessing" : "正在加载数据中,请稍候...",这些官网都是有例子的,我就不重复了)如下代码:

	var  Table = $('#sample_1') .on( 'processing.dt', function ( e, settings, processing ) {
						$('#sample_1_processing').css( 'color', processing ? 'red' : 'red' );//设置文字为红色
						$('#sample_1_processing').css( 'display', processing ? 'block' : 'none' );
				        
				    } ).dataTable(
							datatables_options);
      这样就可以自定义了,成功之后的前后对比:

JQury datatables 改变处理中 显示样式_第2张图片JQury datatables 改变处理中 显示样式_第3张图片

你可能感兴趣的:(JavaWeb,datatables,处理中样式)