สอบถามเรื่องปริ้นต่อเนื่องหน่อยครับโดยที่ตอน print ต้องโชว์ header content footer asp.net vb.net html css
HTML Code (XML) <table id="geonames" class="searchresult dontprint" border="1">
<thead>
<tr id="headerRow">
<th>
Name
</th>
<th>
Country Code
</th>
<th>
Longitude
</th>
<th>
Latitude
</th>
<th>
Population
</th>
<th>
ID
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="searchdiv" class="dontprint"></div>
<button class="dontprint" style="float: right">Print Preview</button>
<div id="printme">
</div>
</div>
CSS Code (XML) body {
display: block;
}
iframe {
display: none;
}
.pagebreak, .headerCopy {
display: none;
}
@media print {
.dontprint {
display: none
}
body {
display: block;
}
.geoname {
display: table-row !important;
}
.pagebreak {
display: block;
page-break-after: always;
}
}
JavaScript Code (JavaScript)
var search;
var searchdiv;
var perPage = 3;
var geo = {
"geonames": [{
"lng": -99.12766456604,
"geonameId": 3530597,
"countrycode": "MX",
"name": "Mexiko-Stadt",
"fclName": "city, village,...",
"toponymName": "Mexico City",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Mexico_City",
"lat": 19.428472427036,
"fcl": "P",
"population": 12294193,
"fcode": "PPLC"
}, {
"lng": 116.397228240967,
"geonameId": 1816670,
"countrycode": "CN",
"name": "Peking",
"fclName": "city, village,...",
"toponymName": "Beijing",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Beijing",
"lat": 39.9074977414405,
"fcl": "P",
"population": 11716620,
"fcode": "PPLC"
}, {
"lng": 116.397228240967,
"geonameId": 1816670,
"countrycode": "CN",
"name": "Peking",
"fclName": "city, village,...",
"toponymName": "Beijing",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Beijing",
"lat": 39.9074977414405,
"fcl": "P",
"population": 11716620,
"fcode": "PPLC"
}, {
"lng": 116.397228240967,
"geonameId": 1816670,
"countrycode": "CN",
"name": "Peking",
"fclName": "city, village,...",
"toponymName": "Beijing",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Beijing",
"lat": 39.9074977414405,
"fcl": "P",
"population": 11716620,
"fcode": "PPLC"
}, {
"lng": 116.397228240967,
"geonameId": 1816670,
"countrycode": "CN",
"name": "Peking",
"fclName": "city, village,...",
"toponymName": "Beijing",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Beijing",
"lat": 39.9074977414405,
"fcl": "P",
"population": 11716620,
"fcode": "PPLC"
}, {
"lng": 120.9822,
"geonameId": 1701668,
"countrycode": "PH",
"name": "Manila",
"fclName": "city, village,...",
"toponymName": "Manila",
"fcodeName": "capital of a political entity",
"wikipedia": "en.wikipedia.org/wiki/Manila",
"lat": 14.6042,
"fcl": "P",
"population": 10444527,
"fcode": "PPLC"
}]
};
$(function () {
searchdiv = $("#searchdiv");
searchdiv.pagination({
itemsOnPage: perPage,
cssStyle: "light-theme",
onPageClick: function (pageNumber) {
var showFrom = perPage * (pageNumber - 1);
var showTo = showFrom + perPage;
search.hide()
.slice(showFrom, showTo).show();
}
});
updateItems();
var data = geo.geonames;
for (var i = 0; i < data.length; i++) {
var tr = $('<tr class=geoname/>');
if (data[i].geonameId) {
tr.append("<td id=''>" + data[i].name + "</td>");
tr.append("<td id=''>" + data[i].countrycode + "</td>");
tr.append("<td id=''>" + data[i].lng + "</td>");
tr.append("<td id=''>" + data[i].lat + "</td>");
tr.append("<td id=''>" + data[i].population + "</td>");
tr.append("<td id=''>" + data[i].geonameId + "</td>");
tr.append("<td id=''>" + "<a class=geonameview id=" + data[i].geonameId + " href='#' >View Details</a>" + "</td>");
}
$("#geonames > tbody").append(tr);
}
updateItems();
$("button.dontprint").click(function () {
var rows = $("#geonames > tbody > tr");
// this bit really needs to be fixed
for (var i = 0; i < rows.length; i += 3) {
var table = $("<table class=pagebreak />");
table.append("<thead />");
table.find("thead").append($("#headerRow").clone());
table.append("<tbody />");
table.find("tbody").append($(rows[i]).clone());
table.find("tbody").append($(rows[i + 1]).clone());
table.find("tbody").append($(rows[i + 2]).clone());
$("#printme").append(table);
}
window.print();
$("#printme").empty();
});
});
function updateItems() {
search = $(".geoname");
searchdiv.pagination("updateItems", search.length);
var page = Math.min(
searchdiv.pagination("getCurrentPage"),
searchdiv.pagination("getPagesCount")
);
searchdiv.pagination("selectPage", page);
}
Date :
2019-04-05 11:17:42By :
หน้าฮี
ตอบความคิดเห็นที่ : 2 เขียนโดย : หน้าฮี เมื่อวันที่ 2019-04-05 11:20:52 รายละเอียดของการตอบ ::
ผมสามารถทำ break page ให้ table count page per 30 ได้ละครับ
ติดปัญหาแบบในรูปอะครับทำยังไงให้ตอน print header with footer มีทุกหน้าครับ
_________________________
| Hearder |
| material list company ......... |
| date : dd/MM/yyyy |
| oderheader : xxxxxxx |
------------------------------------------
| |
| |
| |
| |
| |
| |
| |
| |
| |
------------------------------------------
| Signature : xxxxxx |
| |
------------------------------------------
Date :
2019-04-05 12:26:28By :
adminliver
ลองไล่ดูครับ เหมือนผายลม เดี๋ยวมันก็ได้เองCode (C#) var lookup = new Dictionary<int, dynamic>();
conn.Query<dynamic, dynamic, dynamic>(@"
SELECT A.*, B.*, C.*, D.*, E.*, F.*, G.*
FROM Client A
INNER JOIN Instance B ON A.ClientID = B.ClientID
", (A, B) => {
// If dict has no key, allocate new obj
// with another level of array
if (!lookup.ContainsKey(A.ClientID)) {
lookup[A.ClientID] = new {
ClientID = A.ClientID,
ClientName = A.Name,
Instances = new List<dynamic>()
};
}
// Add each instance
lookup[A.ClientID].Instances.Add(new {
InstanceName = B.Name,
BaseURL = B.BaseURL,
WebAppPath = B.WebAppPath
});
return lookup[A.ClientID];
}, splitOn: "ClientID,InstanceID").AsQueryable();
var resultList = lookup.Values;
return resultList;
Date :
2019-04-05 21:34:32By :
หน้าฮี
จาก #NO1 ถ้าผมเขียนเองก็คงเหลือไม่กี่บรรทัดCode (JavaScript)
function DisplaySubStockRemain() {
$.ajax({
type: "GET",
url: "/api/extUtils/BasicSetting/Drug/GetSubStockFilterByWorking_Code",
data: { Working_Code: $('#lblActions').data('PK') },
}).done(function (data) {
var tbody = $('#tblSubStock tbody'), props = ["SeqNo", "Dept_Name", "QP", "Pack_Ratio", "Total_Value", "Location"];
tbody.empty();
$.each(data, function (i, value) {
var tr = $('<tr>');
$.each(props, function (i, prop) {
$('<td>').html(value[prop]).appendTo(tr);
});
tbody.append(tr);
});
});
}
ประมาณนี้
Date :
2019-04-05 22:17:49By :
หน้าฮี
จาก #NO5 อันนี้เป็นควยรู้เดิมเดิมของผม ทำงานได้ดีเยี่ยมไม่มีที่ติCode (JavaScript)
for (let ele of eles)
Microservice Angular React Vue ฺBootStrap 4 คืออะไรว่ะ ผมก็ยังงงงง สรุปว่าไม่รู้ปล. เอาอะไรกับคนแก่อย่างผมว่ะ
Date :
2019-04-05 22:45:24By :
หน้าฮี
Server 03
Load balance : Server 03
Quote:
