Datatabels后端服务请求,怎么也可以使用前端自带排序当前页面

简介:Datatables分两种情况.第一种是把数据直接当参数放入生成表格,这种情况生成的表格自动排序以及自动分页.eg: $(’#example’).dataTable( {data:datas} );第二种是通过后端服务请求获取的数据,需要自己在后端代码自己分页以及排序返回数据到页面.eg: $(’#example’).dataTable( {“serverSide”: true, “ajax”: “xhr.php”} );
因此我们想让后端服务请求过来数据自动排序需要修改文件.

当我们点击表头某列时候这时会触发排序请求到后端,请求参数datatbales会自带把某列需要升降序的参数会发送后端.如图:
如果想后端请求使用前端自动排序,首先需要修改jquery.datatables.js找到_fnBindAction触发排序方法判断触发是排序事件就向e里面添加两个条件.分别是serviceSorting两个参数.(中文注释后面是我添加代码)

function _fnBindAction( n, oData, fn ){
		$(n).on( 'click.DT', oData, function (e) {
					$(n).blur(); // Remove focus outline for mouse users
				    //判断是否是排序触发事件,是设置serviceSorting,serviceSortingSytle
					if (n['className'] == 'sorting'
					  ||  n['className'] == 'sorting_asc'
					  || n['className'] == 'sorting_desc'){
						e['serviceSorting'] = true;
						//e['serviceSortingSytle'] = true;
					}
					fn(e);
				} )
		//后面代码省略
	}

接着进入fn(e)方法里面会跳转到_fnSortAttachListener 方法里,在此方法里把前面设置serviceSorting和serviceSortingSytle两个参数放入到settings中.

function _fnSortAttachListener ( settings, attachTo, colIdx, callback )
	{
		var col = settings.aoColumns[ colIdx ];
	
		_fnBindAction( attachTo, {}, function (e) {
			/* If the column is not sortable - don't to anything */
			if ( col.bSortable === false ) {
				return;
			}
			//添加serviceSorting以及serviceSortingSytle(只适合用datatables的ajax请求来数据排序)
			//其中serviceSortingSytle用于drawCallback回调函数初始化排序图标样式
			if (e['serviceSorting']) {
                settings['serviceSorting'] = true;
                settings['serviceSortingSytle'] = true;
            }
		} );
		//后面代码省略
	}

然后在jquery.datatables.js里面找到_fnDataSource方法添加判断,防止走’返回’ssp’‘请求,修改成返回’‘dom’.这样就完成后端请求过来数据可以使用前端自动排序.

function _fnDataSource ( settings )
	{
		//todo添加settings.serviceSorting判断(只适合用datatables的ajax请求来数据排序)
		if (settings.serviceSorting){
			return 'dom';
		}else if ( settings.oFeatures.bServerSide ) {
			return 'ssp';
		}
		else if ( settings.ajax || settings.sAjaxSource ) {
			return 'ajax';
		}
		return 'dom';
	}

对于只要后端能使用前端排序的小伙伴到第4步就可以了,但是这样排序会出现一个不好效果.就是如果除第一页外点击排序会跳转到第一页,因此我们还需要添加一个判断防止跳转到第一页.找到_fnReDraw方法在添加判断,判断是后端排序请求就把_iDisplayStart 参数设置为0.再把serviceSorting 设置为false避免影响其他事件请求.

function _fnReDraw( settings, holdPosition )
	{
		var
			features = settings.oFeatures,
			sort     = features.bSort,
			filter   = features.bFilter;
	
		if ( sort ) {
			_fnSort( settings );
		}
	
		if ( filter ) {
			_fnFilterComplete( settings, settings.oPreviousSearch );
		}
		else {
			// No filtering, so we want to just use the display master
			settings.aiDisplay = settings.aiDisplayMaster.slice();
		}
	
		if ( holdPosition !== true ) {
			//防止修改后的排序跳转到首页(只适合用datatables的ajax请求来数据排序)
			if (!settings.serviceSorting) {
                settings._iDisplayStart = 0;
                settings.serviceSorting = false;
            }
		}
		//后面代码省略

这样就完成了,可能有些小伙伴不喜欢点击下一页排序图标样式还是之前操作样式.可以在drawCallback回调函数里面修改class样式为sorting.

Datatabels后端服务请求,怎么也可以使用前端自带排序当前页面

相关推荐