[JavaScript] 파라미터 값 다른 페이지로 렌더링 & URL Parsing

먼저, 다른 페이지로 원하는 파라미터를 넘기기 위해 버튼 클릭 시, 해당 값을 다른 페이지로 옮기는 코드를 먼저 구현한다.

$('.dataTables-example').on('click', '#TableIDInfo', function() {
    const row = $(this);
    const tr = row.closest('tr');
    const dataTableRow = table.row(tr[0]);
    const rowData = dataTableRow.data();

    const tableId = rowData.GameTablesID

    location.href = "/report/router?tableId=" + tableId;
});

 

위의 코드는 DataTable 내의 데이터 값을 버튼으로 변경한 id가 TableIDInfo인 버튼을 클릭했을 시, 해당 열의 GameTableId를 받아오는 코드이다.

Id를 받아서 location.href를 통해 새로 만든 페이지인 report/router로 이동한다.

 

이를 구현하기 위해 routes 폴더의 라우팅 구성은 다음과 같이 진행하였다.

router.get("/router", async function(req, res) {
    res.render("report/router", {
    HOST: process.env.API_HOST
    });
})

 

이를 통해 tableId로 구성된 버튼을 클릭할 시, http://localhost:3000/report/router?tableId=177 이러한 URL로 이동하게 된다.

여기서 필요한 정보는 tableId=177의 177이라는 정보이기에 URL QueryString 파싱을 통해 해당 값을 파라미터로 받아내도록 하였다.

URL 파싱을 위한 방법은 https://gent.tistory.com/62님의 블로그를 참고하였습니다.

/*URL Parsing */
const oParams = getUrlParams();

function getUrlParams() {
    var params = {};

    window.location.search.replace(/[?&]+([^=&]+)=([^&]*)/gi,
    function(str, key, value) {
        params[key] = value;
        }
    );
return params;
}

 

위의 코드로 URL 파싱을 진행하였고 그 결과, oParams.tableId 라는 값으로 tableId에 대한 정보를 받을 수 있었다!!

 

하단은 본 코드에서 해당 파라미터가 사용된 부분만 추출한 것이므로 완벽하지 않은 코드이다. 

const table = $('.dataTables-example').DataTable({
    serverSide: true,
    processing: true,
    ajax: {
        url: HOST+"/api/user/betting/info",
        type: "GET",
        dataType: "json",
        contentType: 'application/json; charset=utf-8',
        data: function(d) {
            const info = $('.dataTables-example').DataTable().page.info();
            d.length = info.length;
            d.page = parseInt(info.page)+1
            d.startDate = startDate + " 00:00:00";
            d.endDate = endDate + " 23:59:59";

            //const game = $("#game").val();
            const gameTableId = oParams.tableId;   // 읽어온 tableId 넣기
            const userName = $("#userName").val();   // UserName 검색을 위한 코드
            const betResult = $("#betResult").val();   // betResult 검색을 위한 코드
            const sessionId = $("#sessionId").val();   // sessionId 검색을 위한 코드

            d.gameTableId = gameTableId;   // 읽어온 tableId 넣기

            if(parseInt(betResult) !== -1) {
                d.betResult = betResult;
            }
            

            if(userName !== "") {
                d.userName = userName;
            }

            if(sessionId !== "") {
                d.sessionId = sessionId;
            }

 

이를 통해 game_play_check.ejs 라는 페이지의 DataTable 내의 tableId라는 정보를 router.ejs 에서 oParams.tableId라는 값으로 URL 파싱 등의 과정을 거쳐 받아와 다시 router.ejs 내의 DataTable에 넣어줌으로써 해당 tableId가 검색된 형태의 DataTable을 router.ejs 페이지에서 바로 보여줄 수 있었다!!