[jQuery] jqGrid 데이터 없을 때 처리하기 (jqGrid no data)

jqGrid loadComplete 콜백 함수를 사용하여 그리드의 데이터 로드가 완료된 후에 데이터가 없을 때 메시지를 표시하는 로직입니다.

$("#list.ui-jqgrid-btable")의 그리드 테이블 요소를 선택하고 after() 함수를 사용하여 메시지를 노출시키고 있습니다.
간단한 소스 코드이니 확인해서 사용하시면 됩니다.

 

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/redmond/jquery-ui.css" type="text/css" />
 <!-- jqGrid CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/jqgrid/4.6.0/css/ui.jqgrid.css" type="text/css" />
<!-- The actual JQuery code -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.min.js" /></script>
<!-- The JQuery UI code -->
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" /></script>
<!-- The jqGrid language file code-->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/i18n/grid.locale-kr.js" /></script>
<!-- The atual jqGrid code -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jqgrid/4.6.0/jquery.jqGrid.src.js" /></script>
<script>
$(document).ready(function() {
	var mydata = [];

	$("#list").jqGrid({
		datatype: "local",
		data: mydata,
		colNames:['날짜', '아이디', '이름','상품','가격','합계'],
		colModel:[
			{name:'date', index:'date', width:90, align: "center"},
			{name:'name', index:'name', width:100 , align: "center" },
			{name:'id', index:'id', width:150, align: "center" ,sortable:false },
			{name:'product', index:'product', width:80, align: "center"},
			{name:'amount', index:'amount', width:80, align: "center"},
			{name:'total', index:'total', width:80, align: "center"}
		],
		autowidth: true,
		rownumbers : true,
		multiselect:true,
		pager:'#pager',
		rowNum: 10,
		rowList: [10, 20, 50],
		sortname: 'id',
		sortorder: 'asc',
		height: 250,
		loadComplete: function(data){
            $(".ui-state-default.jqgrid-rownum").removeClass('ui-state-default jqgrid-rownum');
            $("#list_nodata").remove();
            if(data.rows.length == 0){
                $("#list.ui-jqgrid-btable").after("<p id='list_nodata' style='margin-top:10px;text-align:center;font-weight:bold;font-size:12px;'>검색 결과가 없습니다.</p>");
            }
        }

	});

	$(window).on('resize.jqGrid', function() {
		$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
	})
	$(".jarviswidget-fullscreen-btn").click(function(){
		setTimeout(function() {
			$("#list").jqGrid('setGridWidth', $("#list").parent().parent().parent().parent().parent().width());
		}, 100);
	});
});
</script>
<table id="list"></table>
<div id="pager"></div>

 

소스코드 화면